用html5实现一个简单的钟表外观

百变鹏仔 3个月前 (10-18) #H5教程

文章标签钟表

html5已经出来好长时间了，但仍然有不多小伙伴们不太懂，下面小编就来用html5实现一个简单的钟表外观

<html lang="en-US"><style>#myCanvas{border:3px solid blue;}</style><head><script type="text/javascript">	window.onload = function()	{		var mycanvas = document.getElementById("myCanvas");		var context = mycanvas.getContext("2d");context.lineWidth = 2;		context.strokeStyle = "blue";		context.fillStyle = "blue";		context.arc(250,200,5,0,Math.PI*2,true);		context.fill();		context.beginPath();		context.arc(250,200,150,0,Math.PI*2,true);		context.stroke();		context.translate(250,200);		context.rotate(-Math.PI/2);context.save();		for(var i=0;i<60;i++)		{			if(i % 5 == 0)			{context.fillRect(130,0,20,5);context.fillText((i/5 == 0?12:i/5),120,5);			}			else			{context.fillRect(140,0,10,2)			}			context.rotate(Math.PI/30);//360°每6度旋转一次		}context.fillRect(0,-2,90,3);		context.stroke();	}</script></head><body><canvas id=myCanvas width=500px height=400px></canvas></body></html>

效果图

文章推荐

用html5实现一个简单的钟表外观

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集