canvas实现会动的闹钟

Canvas标签

初始化canvas标签

<canvas id="tutorial" width="150" height="150"></canvas>

fillStyle
设置或返回用于填充绘画的颜色、渐变或模式
strokeStyle
设置或返回用于笔触的颜色、渐变或模式
shadowColor
设置或返回用于阴影的颜色
shadowBlur
设置或返回用于阴影的模糊级别
shadowOffsetX
设置或返回阴影距形状的水平距离
shadowOffsetY
设置或返回阴影距形状的垂直距离

createLinearGradient()
创建线性渐变（用在画布内容上）
createPattern()
在指定的方向上重复指定的元素
createRadialGradient()
创建放射状/环形的渐变（用在画布内容上）
addColorStop()
规定渐变对象中的颜色和停止位置

lineCap
设置或返回线条的结束端点样式
lineJoin
设置或返回两条线相交时，所创建的拐角类型
lineWidth
设置或返回当前的线条宽度
miterLimit
设置或返回最大斜接长度

rect()
创建矩形
fillRect()
绘制“被填充”的矩形
strokeRect()
绘制矩形（无填充）
clearRect()
在给定的矩形内清除指定的像素

fill()
填充当前绘图（路径）
stroke()
绘制已定义的路径
beginPath()
起始一条路径，或重置当前路径
moveTo()
把路径移动到画布中的指定点，不创建线条
closePath()
创建从当前点回到起始点的路径
lineTo()
添加一个新点，然后在画布中创建从该点到最后指定点的线条
clip()
从原始画布剪切任意形状和尺寸的区域
quadraticCurveTo()
创建二次贝塞尔曲线
bezierCurveTo()
创建三次方贝塞尔曲线
arc()
创建弧/曲线（用于创建圆形或部分圆）
arcTo()
创建两切线之间的弧/曲线
isPointInPath()
如果指定的点位于当前路径中，则返回 true，否则返回 false

要使用canvas实现闹钟功能只需要使用

beginPath()
moveTo()
closePath();
stroke()
fillStyle
arc()
fill()

首先创建canvas标签设置初始化数值width=‘400’,height=‘400’

<canvas id="canvas" width="400" height="400"></canvas>

使用js获取到canvas标签

var canvas = document.getElementById("canvas"); //获取canvas标签

选择2d打印，获得时间算出时间对应的度数

var context = canvas.getContext("2d"); //选择2d显示打印
var canvas = document.getElementById("canvas"); //获取canvas标签
		var context = canvas.getContext("2d"); //选择2d显示打印
		var nowdate = new Date();
		var hour = nowdate.getHours(); //获取小时
		var minute = nowdate.getMinutes(); //获得分
		var second = nowdate.getSeconds(); //获得秒
		var h = (hour * 30 - 90) * Math.PI / 180;
		var m = (minute * 6 - 90) * Math.PI / 180;
		var s = (second * 6 - 90) * Math.PI / 180;

因为canvas使用的弧线是从90°开始的，所以要实现闹钟0度为起始点，需要减去90°，以此类推

var hour = nowdate.getHours(); //获取小时
var h = (hour * 30 - 90) * Math.PI / 180;
因为var h = (hour * 30 - 90)得到的是数值类型
需要Math.PI/180转换为度

而后将秒针刻度，分针刻度，时刻刻度都打印出来

context.beginPath(); //开始绘制
		//打印分针与秒针刻度
		for(var i = 0; i < 60; i++) {
			context.moveTo(200, 200) //起始点
			context.arc(200, 200, 150, 6 * i * Math.PI / 180, 6 * (i + 1) * Math.PI / 180); //设置起始位，半径，读书
		}
		context.closePath();
		context.stroke();

		//将秒针，分针过长的线覆盖
		context.beginPath(); //开始绘制
		context.moveTo(200, 200);
		context.fillStyle = "#fff";
		context.arc(200, 200, 150 * 19 / 20, 0, 360 * Math.PI / 180);
		context.fill();
		context.beginPath(); //开始绘制

		//打印时针刻度
		for(var i = 0; i < 12; i++) {
			context.moveTo(200, 200) //起始点
			context.arc(200, 200, 150, 30 * i * Math.PI / 180, 30 * (i + 1) * Math.PI / 180); //设置起始位，半径，度数
		}
		context.closePath();
		context.stroke();

		//将时针刻度过长的线覆盖
		context.beginPath(); //开始绘制
		context.moveTo(200, 200);
		context.fillStyle = "#fff";
		context.arc(200, 200, 150 * 18 / 20, 0, 360 * Math.PI / 180);
		context.fill();

再将秒针，分针，时针依次打印出来

//秒针
		context.beginPath();
		context.moveTo(200, 200);
		context.arc(200, 200, 150 * 16 / 20, s, s);
		context.stroke();

		//分针
		context.beginPath();
		context.moveTo(200, 200);
		context.arc(200, 200, 150 * 14 / 20, m, m);
		context.stroke();

		//时针
		context.beginPath();
		context.moveTo(200, 200);
		context.arc(200, 200, 150 * 12 / 20, h, h);
		context.stroke();

将代码放入drwp（）方法里，使用定时器每秒调用一次

drwp();

setInterval("drwp()", 1000)

最后实现的效果图