canvas实现会动的闹钟

本文介绍了如何利用HTML5的Canvas标签实现一个动态的闹钟效果。首先创建canvas并设置初始尺寸,然后通过JavaScript获取canvas元素,并使用2D渲染上下文计算时间对应的角度。由于canvas的弧线起点是90度,因此需要调整角度以使0度对应闹钟的12点。接着绘制秒针、分针和时针的刻度及指针,将绘制逻辑放入draw()方法中,通过定时器每秒更新一次,最终呈现出动态的闹钟显示效果。

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)

最后实现的效果图

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值