您的位置：首页 > 其它
利用canvas绘制钟表

2017-09-18 11:50 295 查看
利用canvas绘制一个钟表，钟表的指针是可以根据当前时间自己动的哦！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
<script type="text/javascript">
window.onload = function() {
var oCanvas = document.getElementById("canvas");
var context = oCanvas.getContext("2d");

//绘制钟表
(function drawClock() {
//根据浏览器的刷新频率，在一定时间之后执行，根据递归的思想，实现drawClock的反复调用，最终实现动画效果
window.requestAnimationFrame(drawClock);

//获取当前时间
var time = new Date();
var sec = time.getSeconds();
var min = time.getMinutes() + sec / 60;
var hour = time.getHours() + min / 60;

//清空画布
context.clearRect(0, 0, oCanvas.width, oCanvas.height);
//将画板设为灰色
context.fillStyle = "#eee";
context.fillRect(0, 0, oCanvas.width, oCanvas.height);

//绘制表盘
context.beginPath();
context.arc(250, 250, 200, 0, Math.PI * 2);
context.lineWidth = 4;
context.stroke();
context.closePath();

//储存context状态
context.save();
//将(250,250)转换成原点
context.translate(250, 250);
//绘制小时刻度
for(var i = 0; i < 12; i++) {
//画线
context.beginPath();
context.moveTo(0, -195);
context.lineTo(0, -175);
context.lineWidth = 5;
context.stroke();
context.closePath();
//旋转画布
context.rotate(Math.PI / 6);
}
//恢复context状态
context.restore();

//储存context状态
context.save();
//将(250,250)转换成原点
context.translate(250, 250);
//绘制分钟刻度
for(var i = 0; i < 60; i++) {
//画线
context.beginPath();
context.moveTo(0, -195);
context.lineTo(0, -185);
context.lineWidth = 3;
context.stroke();
context.closePath();
//旋转画布
context.rotate(Math.PI / 30);
}
//恢复context状态
context.restore();

//储存context状态
context.save();
//将(250,250)转换成原点
context.translate(250, 250);
//绘制时针
context.beginPath();
context.rotate(Math.PI / 6 * hour)
context.moveTo(0, -155);
context.lineTo(0, 20);
context.lineWidth = 5;
context.stroke();
context.closePath();
//恢复context状态
context.restore();

//储存context状态
context.save();
//将(250,250)转换成原点
context.translate(250, 250);
//绘制分针
context.beginPath();
context.rotate(Math.PI / 30 * min)
context.moveTo(0, -160);
context.lineTo(0, 25);
context.lineWidth = 3;
context.stroke();
context.closePath();
//恢复context状态
context.restore();

//储存context状态
context.save();
//将(250,250)转换成原点
context.translate(250, 250);
//绘制秒针
context.beginPath();
context.rotate(Math.PI / 30 * sec)
context.moveTo(0, -165);
context.lineTo(0, 30);
context.lineWidth = 2;
context.strokeStyle = "red";
context.stroke();
context.closePath();
//恢复context状态
context.restore();

//储存context状态
context.save();
//将(250,250)转换成原点
context.translate(250, 250);
//绘制表盘中心圆圈
context.beginPath();
context.arc(0, 0, 5, 0, 2 * Math.PI);
context.lineWidth = 3;
context.strokeStyle = "red";
context.stroke();
context.fillStyle = "#fff";
context.fill()
context.closePath();

//绘制秒针边上圆圈
context.beginPath();
context.rotate(Math.PI / 30 * sec)
context.arc(0, -120, 5, 0, 2 * Math.PI);
context.lineWidth = 3;
context.stroke();
context.fillStyle = "#fff";
context.fill()
context.closePath();
//恢复context状态
context.restore();
})() //立即执行drawClock这个函数

//实现蓝色小滑块的移动；
var x = 0;
var y = 0;
(function move() {
window.requestAnimationFrame(move);
x += 1;
y += 1;
context.fillStyle = "#00A2E8";
context.fillRect(x, y, 20, 20);
})()
}
</script>
</html>
结果如下：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签： canvas
相关文章推荐
新的分享
章节导航