WEB前端开发学习----9. 使用canvas来画个时钟

最新推荐文章于 2023-01-26 15:08:45 发布

carlosli

最新推荐文章于 2023-01-26 15:08:45 发布

阅读量1.6k

点赞数

分类专栏： web前端文章标签： web前端开发 canvas

本文链接：https://blog.csdn.net/carlosli/article/details/38676471

版权

web前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

canvas元素在html5中的重要性非同一般。配合JS让我们实现了在浏览器页面中作画的强大功能。不再单单依靠图片，flash等外部文件，减少http请求，从而网页加载速度更加快捷。

简单的线段：

看个小演示 canvas小房子

不用函数累死人。。。。

旋转：

使用提供的rotate()方法。需要注意的是，在旋转前，应该重新定位原点。一般来说将要旋转的图像的端点重定向为原点，以此为基础来旋转。也就是说先定位，再设置旋转角度，最后画图。看个演示 canvas 扇子。这样要比一道一道的画线方便许多。

用渐变色填充图像：

分为径向渐变和线性渐变，有点类似于CSS3的渐变操作。不需要再用图片来做渐变背景了。

看个演示 canvas 立体小球。

用这些方法就可以做一个时钟了，纯canvas+js,不使用图片。

查看效果 canvas时钟

完整的代码：

<span style="font-family:Microsoft YaHei;font-size:14px;"><!DOCTYPE html>
<html>
<head>
	<metac charset=UTF-8>
	<title>时钟</title>
</head>
<body>
	<canvas id="canvas" width="500" height="500">请更新浏览器版本</canvas>
	<script>
		var can=document.getElementById("canvas");
		var cxt=can.getContext("2d");
		
		function drawClock(){
			//清楚画布
			cxt.clearRect(0, 0, 500, 500);
			//得到当前时间
			var time=new Date();
			var hours=time.getHours();
			var mins=time.getMinutes();
			var secs=time.getSeconds();

			//转换为12进制
			hours=hours>12?hours-12:hours;
			//小时必须获得浮点型，不能只显示整点
			hours=hours+mins/60;
			//先画出表盘
			cxt.lineWidth=10;
			cxt.strokeStyle="blue";
			cxt.beginPath();
			cxt.arc(250, 250, 200, 0, 360, false);
			cxt.closePath();
			cxt.stroke();

			//画出时刻
			for(var i=0;i<12;i++){
				cxt.save();
				cxt.beginPath();
				cxt.lineWidth=7;
				cxt.strokeStyle="black";
				//按照圆心来旋转，好计算
				cxt.translate(250, 250);
				cxt.rotate(i*30*Math.PI/180);
				cxt.beginPath();
				cxt.moveTo(0, -170);
				cxt.lineTo(0, -190);
				cxt.closePath();
				cxt.stroke();
				cxt.restore();
			}
			for(var i=0;i<60;i++){
				cxt.save();
				cxt.beginPath();
				cxt.lineWidth=5;
				cxt.strokeStyle="black";
				//按照圆心来旋转，好计算
				cxt.translate(250, 250);
				cxt.rotate(i*6*Math.PI/180);
				cxt.beginPath();
				cxt.moveTo(0, -180);
				cxt.lineTo(0, -190);
				cxt.closePath();
			cxt.stroke();
			cxt.restore();
			}

			//画出时针
			cxt.save();
			cxt.lineWidth=7;
			cxt.strokeStyle="black";
			cxt.translate(250, 250);
			cxt.rotate(hours*30*Math.PI/180);
			cxt.beginPath();
			cxt.moveTo(0, 15);
			cxt.lineTo(0, -130);
			cxt.closePath();
			cxt.stroke();
			cxt.restore();
			//分针
			cxt.save();
			cxt.lineWidth=5;
			cxt.strokeStyle="black";
			cxt.translate(250, 250);
			cxt.rotate(mins*6*Math.PI/180);
			cxt.beginPath();
			cxt.moveTo(0, 15);
			cxt.lineTo(0, -150);
			cxt.closePath();
			cxt.stroke();
			cxt.restore();
			//秒针
			cxt.save();
			cxt.lineWidth=3;
			cxt.strokeStyle="red";
			cxt.translate(250, 250);
			cxt.rotate(secs*6*Math.PI/180);
			cxt.beginPath();
			cxt.moveTo(0, 15);
			cxt.lineTo(0, -172);
			cxt.closePath();
			cxt.stroke();
			//美化 画出中间的小圆点
			cxt.beginPath();
			cxt.arc(0, 0, 6, 0, 360, false);
			cxt.closePath();
			cxt.fillStyle="black";
			cxt.fill();
			cxt.stroke();
			//画出秒针前段的小圆点
			cxt.beginPath();
			cxt.arc(0, -150, 8, 0, 360, false);
			cxt.closePath();
			cxt.fillStyle="black";
			cxt.fill();
			cxt.stroke();
			cxt.restore();


		}
		//为了避免打开后等待1秒才画图，先调用一次
		drawClock();
		setInterval(drawClock,1000);

	</script>
</body>
</html></span>