发表更新笔记 / 前端7 分钟读完 (大约981个字)

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)
点击下载源代码

Canvas标签例子

https://ppting.me/2014/07/25/2014_07_25_canvas_example/

作者

PPTing

发布于

2014-07-25

更新于

2022-02-12

许可协议

评论

关注我
×