Canvas标签例子

# Canvas标签例子 # 这是几个在网上找到的几个例子,学着做了一下
这几个例子都是使用Canvas标签和javascript写成的
~~***这一句话没有意义,为的只是把主页面博文的简介去掉很多很多很多很多很多很多的1234567891011121314啊尼玛,谁能教我应该怎么办?万分感谢T^T***~~ 现在懂了,只需要加上``这个标签就好了 ##时钟
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!doctype html>
<html>
<title>clock</title>
<body>
<canvas id="clock" width="500" height="500" ></canvas>
<script>
var clock=document.getElementById('clock');//Javascript使用id寻找canvas元素
var cxt=clock.getContext('2d');//然后创建context对象<br>
function makeclock()
{
cxt.clearRect(0,0,500,500);//删除画布的所有内容
var time=new Date();//定义一个函数 time,获取当前时间
var hour=time.getHours();
var minute=time.getMinutes();
var second=time.getSeconds();
hour=hour+minute/60+second/3600;//为了使时针指在刻度中间
hour=hour>12?hour-12:hour;//将24小时制换算为12小时制
//画表盘
cxt.strokeStyle="blue";//设置表盘颜色为蓝色
cxt.lineWidth=10;//设置宽度为10
cxt.beginPath();
cxt.arc(250,250,200,0,360,false);
cxt.closePath();
cxt.stroke();
cxt.fillStyle="yellow";
cxt.fill();
//时针刻度
for(var i=0;i<12;i++)
{
cxt.save();
cxt.lineWidth=10;
cxt.strokeStyle="#000";
cxt.translate(250,250);
cxt.rotate(i*30*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-190);
cxt.lineTo(0,-170);
cxt.closePath();
cxt.stroke();
cxt.restore();//translate();rotate();函数要在beginPath();之前定义
}
//分针刻度
for(var i=0;i<60;i++)
{
cxt.save();
cxt.lineWidth=7;
cxt.strokeStyle="black";
cxt.translate(250,250);
cxt.rotate(i*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-190);
cxt.lineTo(0,-180);
cxt.closePath();
cxt.stroke();
cxt.restore();
}
//画时针
cxt.save();
cxt.lineWidth=10;
cxt.translate(250,250);
cxt.rotate(hour*30*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-120);
cxt.lineTo(0,10);
cxt.closePath();
cxt.strokeStyle="black";
cxt.stroke();
cxt.restore();
//画分针
cxt.save();
cxt.lineWidth=6;
cxt.translate(250,250);
cxt.rotate(minute*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-160);
cxt.lineTo(0,10);
cxt.closePath();
cxt.strokeStyle="black";
cxt.stroke();
cxt.restore();
//画秒针
cxt.save();
cxt.lineWidth=3;
cxt.translate(250,250);
cxt.rotate(second*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-185);
cxt.lineTo(0,15);
cxt.closePath();
cxt.strokeStyle="red";
cxt.stroke();
//画中心圆
cxt.beginPath();
cxt.arc(0,0,5,0,360,false);
cxt.closePath();
cxt.fillStyle="gray";
cxt.fill();
cxt.strokeStyle="red";
cxt.stroke();
//画秒针的圆
cxt.beginPath();
cxt.arc(0,-160,5,0,360,false);
cxt.closePath();
cxt.strokeStyle="red";
cxt.stroke();
cxt.fill();
cxt.restore();
}
makeclock();//避免第一次刷新时空白,先画一遍时钟
setInterval(makeclock,1000);
</script>
</body>
</html>
效果图如下:
![时钟](https://ooo.0o0.ooo/2017/01/07/5870e2030ee88.jpg)
点击下载源代码 ##地球公转
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!doctype html>
<html>
<head></head>
<body>
<canvas width="1000" height="1000" Style="background:black" id="canvas">您的浏览器不支持Canvas标签</canvas>
<script>
var canvas=document.getElementById('canvas');//单引号
var cxt=canvas.getContext('2d');
var time=0;
function sun()
{
cxt.clearRect(0,0,1000,1000);
//画地球轨迹
cxt.beginPath();
cxt.arc(500,500,100,0,360,false);
cxt.closePath();
cxt.strokeStyle="white";
cxt.lineWidth="2";
cxt.stroke();
//画太阳
cxt.beginPath();
cxt.arc(500,500,20,0,360,false);
cxt.closePath();
//填充太阳的颜色
var suncolor=cxt.createRadialGradient(500,500,0,500,500,20);
suncolor.addColorStop(0,"#f00");
suncolor.addColorStop(1,"#f90");
cxt.fillStyle=suncolor;
cxt.fill();
//画地球
cxt.save();
cxt.translate(500,500);
cxt.rotate(time*365/360*Math.PI/180);
cxt.beginPath();
cxt.arc(0,100,10,0,360,false);
cxt.closePath();
//填充地球颜色
var earthcolor=cxt.createRadialGradient(0,100,0,0,100,10);
earthcolor.addColorStop(0,"#78B1E8");
earthcolor.addColorStop(1,"#050C12");
cxt.fillStyle=earthcolor;
cxt.fill();
cxt.restore();
time+=1;
}
//让地球动起来
setInterval(sun,10);
</script>
</body>
</html>
效果图如下: ![地球公转](https://ooo.0o0.ooo/2017/01/07/5870e2472286f.jpg)
点击下载源代码 ##太阳系
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!doctype html>
<html>
<title>太阳系</title>
<body>
<canvas id="canvas" width="1000" height="1000" style="background:black">您的浏览器不支持Canvas标签</canvas>
<script>
var cxt=document.getElementById('canvas').getContext('2d');
//画轨道
function drawTrack()
{
for(var i=1;i<9;i++)
{
cxt.beginPath();
cxt.arc(500,500,i*50,0,360,false);
cxt.closePath();
cxt.strokeStyle="#fff";
cxt.stroke();
}
}
drawTrack();
//画星球
function Star(x,y,r,cycle,lightcolor,darkcolor)
{
this.x=x;
this.y=y;
this.r=r;
this.lightcolor=lightcolor;
this.darkcolor=darkcolor;
this.cycle=cycle;
this.time=0;
this.color=null;
this.draw=function()
{
cxt.save();
cxt.translate(500,500);
cxt.rotate(this.time*(360/this.cycle)*Math.PI/180);
cxt.beginPath();
cxt.arc(this.x,this.y,this.r,0,360,false);
cxt.closePath();
this.color=cxt.createRadialGradient(this.x,this.y,0,this.x,this.y,this.r);
this.color.addColorStop(0,this.lightcolor);
this.color.addColorStop(1,this.darkcolor);
cxt.fillStyle=this.color;
cxt.fill();
cxt.restore();
this.time+=1;
}
}
function Sun()
{
Star.call(this,0,0,20,0,"#F00","#f90");
}
function Mercury()
{
Star.call(this,0,50,10,87.70,"#A69697","#5C3E40");
}
function Venus()
{
Star.call(this,0,100,10,224.701,"#C4BBAC","#1F1315");
}
function Earth()
{
Star.call(this,0,150,10,365.2422,"#78B1E8","#050C12");
}
function Mars()
{
Star.call(this,0,200,10,686.98,"#CEC9B6","#76422D");
}
function Jupiter()
{
Star.call(this,0,250,10,4332.589,"#C0A48E","#322222");
}
function Saturn()
{
Star.call(this,0,300,10,10759.5,"#F7F9E3","#5C4533");
}
function Uranus()
{
Star.call(this,0,350,10,30799.095,"#A7E1E5","#19243A");
}
function Neptune()
{
Star.call(this,0,400,10,164.8*365,"#0661B2","#1E3B73");
}
var sun=new Sun();
var mercury=new Mercury();
var venus=new Venus();
var earth=new Earth();
var mars=new Mars();
var jupiter=new Jupiter();
var saturn=new Saturn();
var uranus=new Uranus();
var neptune=new Neptune();
function move()
{
cxt.clearRect(0,0,1000,1000);
drawTrack();
sun.draw();
mercury.draw();
venus.draw();
earth.draw();
mars.draw();
jupiter.draw();
saturn.draw();
uranus.draw();
neptune.draw();
}
setInterval(move,10);
</script>
</body>
</html>
效果图如下: ![太阳系](https://ooo.0o0.ooo/2017/01/07/5870e247112e6.jpg)
点击下载源代码
作者

PPTing

发布于

2014-07-25

更新于

2022-02-12

许可协议

评论