HTML5之canvas2

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />

<title>无标题文档</title>

<style>

body{ background:black;}

#c1{ background:white;}

</style>

window.onload = function(){

var oC = document.getElementById('c1');

var oGC = oC.getContext('2d');

oGC.moveTo(200,200);

//弧度 = 角度*Math.PI/180

oGC.arc(200,200,150,0,90*Math.PI/180,true);

oGC.stroke();

};

</script>

</head>

<body>

</body>

实例：用arc画时钟

思路：先用弧度画出时钟的刻度线，再在上层画白色的圆盘覆盖点中心，再类似原理画时刻线，再用白色覆盖点。以中心点为起始点画分针线，时针线，秒针线

JS获取当前时间的小时，分钟，秒钟。

var oHoursValue =(-90 + oHours*30 + oMin/2) * Math.PI/180;

var oMinValue = (-90 + oMin*6) *Math.PI/180;

var oSenValue = (-90 + oSen*6) *Math.PI/180;

最后开一个定时器，没1秒钟调用该函数一次

<style>

body{ background:black;}

#c1{ background:white;}

</style>

window.onload = function(){

var oC = document.getElementById('c1');

var oGC = oC.getContext('2d');

function toDraw(){

var x = 200;

var y = 200;

var r = 150;

oGC.clearRect(0,0,oC.width,oC.height);

var oDate = new Date();

var oHours = oDate.getHours();

var oMin = oDate.getMinutes();

var oSen =oDate.getSeconds();

var oHoursValue = (-90 + oHours*30 + oMin/2) * Math.PI/180;

var oMinValue = (-90 + oMin*6) * Math.PI/180;

var oSenValue = (-90 + oSen*6) * Math.PI/180;

/*oGC.moveTo(x,y);

oGC.arc(x,y,r,0,6*Math.PI/180,false);

oGC.moveTo(x,y);

oGC.arc(x,y,r,6*Math.PI/180,12*Math.PI/180,false);*/

oGC.beginPath();

for(var i=0;i<60;i++){

oGC.moveTo(x,y);

oGC.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);

}

oGC.closePath();

oGC.stroke();

oGC.fillStyle = 'white';

oGC.beginPath();

oGC.moveTo(x,y);

oGC.arc(x,y,r*19/20,0,360*(i+1)*Math.PI/180,false);

oGC.closePath();

oGC.fill();

oGC.lineWidth = 3;

oGC.beginPath();

for(var i=0;i<12;i++){

oGC.moveTo(x,y);

oGC.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);

}

oGC.closePath();

oGC.stroke();

oGC.fillStyle = 'white';

oGC.beginPath();

oGC.moveTo(x,y);

oGC.arc(x,y,r*18/20,0,360*(i+1)*Math.PI/180,false);

oGC.closePath();

oGC.fill();

oGC.lineWidth = 5;

oGC.beginPath();

oGC.moveTo(x,y);

oGC.arc(x,y,r*10/20,oHoursValue,oHoursValue,false);

oGC.closePath();

oGC.stroke();

oGC.lineWidth = 3;

oGC.beginPath();

oGC.moveTo(x,y);

oGC.arc(x,y,r*14/20,oMinValue,oMinValue,false);

oGC.closePath();

oGC.stroke();

oGC.lineWidth = 1;

oGC.beginPath();

oGC.moveTo(x,y);

oGC.arc(x,y,r*19/20,oSenValue,oSenValue,false);

oGC.closePath();

oGC.stroke();

}

setInterval(toDraw,1000);

toDraw();

};

</script>

</head>

<body>

</body>

<style>

body{ background:black;}

#c1{ background:white;}

</style>

window.onload = function(){

var oC = document.getElementById('c1');

var oGC = oC.getContext('2d');

oGC.moveTo(100,200);

oGC.arcTo(100,100,200,100,50);

oGC.stroke();

};

</script>

</head>

<body>

</body>

<style>

body{ background:black;}

#c1{ background:white;}

</style>

window.onload = function(){

var oC = document.getElementById('c1');

var oGC = oC.getContext('2d');

/*oGC.moveTo(100,200);

oGC.quadraticCurveTo(100,100,200,100);

oGC.stroke();*/

oGC.moveTo(100,200);

oGC.bezierCurveTo(100,100,200,200,200,100);

oGC.stroke();

};

</script>

<style>

body{ background:black;}

#c1{ background:white;}

</style>

window.onload = function(){

var oC = document.getElementById('c1');

var oGC = oC.getContext('2d');

oGC.translate(100,100);

oGC.rotate(20*Math.PI/180);

oGC.rotate(25*Math.PI/180);

oGC.scale(2,2);

oGC.fillRect(0,0,100,100);

};

</script>

</head>

<body>

</body>

实例：旋转加缩放的小方块

<style>

body{ background:black;}

#c1{ background:white;}

</style>

window.onload = function(){

var oC = document.getElementById('c1');

var oGC = oC.getContext('2d');

var num = 0;

var num2 = 0;

var value = 1;

setInterval(function(){

num++;

oGC.save();

oGC.clearRect(0,0,oC.width,oC.height);

oGC.translate(100,100);

if(num2 == 100){

value = -1;

}

else if(num2 == 0){

value = 1;

}

num2 += value;

oGC.scale( num2*1/50,num2*1/50 );

oGC.rotate(num*Math.PI/180);

oGC.translate(-50,-50);

oGC.fillRect(0,0,100,100);

oGC.restore();

},30);

};

</script>

</head>

<body>

</body>

HTML5之canvas2相关推荐

html 星空效果,html5 canvas炫酷旋转银河系星空背景特效
这是一款html5 canvas炫酷旋转银河系星空背景特效.该特效通过canvas来绘制银河系星盘,并制作星系旋转的效果,非常炫酷. 使用方法 HTML结构该旋转银河系星空背景特效的HTML结果只需 ...
HTML5“爱心鱼”游戏总结
HTML5"爱心鱼"游戏总结目录 1.页面搭建 2.画蓝色的海洋 3.画随海水摆动的漂浮物 4.画随海水摆动的海葵 5.画静态的大鱼和小鱼 6.鼠标控制大鱼的游向 7.给大鱼.小 ...
HTML5游戏开发实战
<HTML5游戏开发实战> 基本信息原书名:HTML5 Games Development by Example: Beginner's Guide 作者: (美)Makzan 译者: ...
HTML5+JavaScript调用摄像头拍照或者摄像
调用摄像头拍照或者摄像有多种方法,之前介绍过两种: HTML5 <input type="file">标签直接调用:https://blog.csdn.net/qq_2 ...
html5清除所有,html5 canvas永久清除
我一直在创建一个画布,你可以生成文本并显示在我的画布上.html5 canvas永久清除 POST按钮和清除按钮在第一个工作正常! 我遇到的下一个问题/错误是,当我输入一个新单词并点击POST, 之前 ...
php图片素描化,html5利用canvas实现图片转素描效果
本章给大家介绍html5如何利用canvas实现图片转素描效果.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 素描滤镜原理: 最基础的算法就是: 1.去色:(去色公式:gray = ...
html5 canvas 画笔透明的实现方法
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
HTML5边玩边学（4）：变幻的色彩
在上一节HTML5边玩边学(3):像素和颜色中我们讲了颜色和像素是怎么回事,其实大多数情况下,我们用不到像素级别的操作,我们只需要对颜色进行整体设置就行了. 一.基本颜色在HTML5边玩边学(2): ...
html5 strongeaseinout,HTML5新特性之canvas标签（Day1-4）(示例代码)
canvas 1.什么是canvas? 1.1 是HTML5提供的一种新标签 1.2 canvas是一个矩形区域的画布,可以用JavaScript在上面绘画.控制其每一个像素 1.3 canvas 拥 ...

HTML5之canvas2

HTML5之canvas2相关推荐

最新文章

热门文章