Canvas之时钟
来源：程序员人生 发布时间：2015-04-22 08:47:06 阅读次数：2889次
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas id="clock" width="500" height="500">您的阅读器不支持Canvas标签,没法看到时钟
</canvas>
<script>
var clock = document.getElementById('clock');
var context = clock.getContext('2d'); //制作绘图环境,设置2d配置环境
function drawClock() {
context.clearRect(0, 0, 500, 500);//清除画布，不然画出的指针会积累
var dateOfNow = new Date();
var hour = dateOfNow.getHours();
var second = dateOfNow.getSeconds();
var minute = dateOfNow.getMinutes();
hour = hour > 12 ? hour % 12 : hour;
hour += minute / 60;
//表盘
context.lineWidth = 10;
context.strokeStyle = "red"
context.beginPath();
/*
第1个参数：圆心x坐标
第2个参数：圆心y坐标
第3个参数：半径
第4个参数：开始角度
第5个参数：结束角度
第6个参数：false表逆时针画，true表顺时针画
*/
context.arc(250, 250, 200, 0, 360, false);
context.closePath(); //只是命令,真正由stroke画
context.stroke();
//时刻度
for (var i = 0; i < 12; i++) {
context.save(); //保存当前状态
context.lineWidth = 7; //设置时针的粗细
context.strokeStyle = "black"; //设置时针的色彩
context.translate(250, 250); //设置旋转圆心,(0,0)点
context.rotate(i * (360 / 12) * Math.PI / 180); //旋转弧度：角度*Math.PI/180
context.beginPath();
context.moveTo(0, ⑴75);
context.lineTo(0, ⑴95);
context.closePath();
context.stroke();
context.restore(); //把当前状态释放回来
}
//分刻度
for (var i = 0; i < 60; i++) { //绘制方法与时刻度的1样，改些参数就好了
context.save();
context.lineWidth = 4;
context.strokeStyle = "black";
context.translate(250, 250);
context.rotate(i * (360 / 60) * Math.PI / 180);
context.beginPath();
context.moveTo(0, ⑴85);
context.lineTo(0, ⑴95);
context.closePath();
context.stroke();
context.restore();
}
//时针
context.save();
context.lineWidth = 7;
context.strokeStyle = "black";
context.translate(250, 250); //设置异次元空间的(0,0)点
context.rotate(hour * 30 * Math.PI / 180);
context.beginPath();
context.moveTo(0, ⑴35);
context.lineTo(0, 10);
context.closePath();
context.stroke();
context.restore();
//分针
context.save();
context.lineWidth = 4;
context.strokeStyle = "black";
context.translate(250, 250);
context.rotate(minute * 6 * Math.PI / 180);
context.beginPath();
context.moveTo(0, ⑴55);
context.lineTo(0, 20);
context.closePath();
context.stroke();
context.restore();
//秒针
context.save();
context.lineWidth = 3;
context.strokeStyle = "red";
context.translate(250, 250);
context.rotate(second * 6 * Math.PI / 180);
context.beginPath();
context.moveTo(0, ⑴80);
context.lineTo(0, 20);
context.closePath();
context.stroke();
//画秒针与时针、分针的交叉点
context.beginPath();
context.arc(0, 0, 5, 0, 360, false);//在异次元空间里圆心为(0,0)
context.closePath();
context.fillStyle = "black";//填充色彩
context.fill();
context.stroke();
//秒针中间的小圆
context.beginPath();
context.arc(0, ⑴10, 5, 0, 360, false);
context.closePath();
context.fillStyle = "white";
context.fill();
context.stroke();
context.restore();
}
setInterval(drawClock, 1000);//刷新
</script>
</body>
</html>
生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
