前言
canvas设计一个显示当前时间的时钟
实现情况
思路
想让canvas绘制的东西动起来，最直接的办法就是不停的进行重绘，可能刚开始有些人会担心效率的问题，害怕代码过长冗余，可读性差的问题，实际上将绘制目标封装在函数中，然后放置函数在定时器中，每秒钟调用一次就可以实现 ，
首先是创建绘画环境
var canvas = document.getElementById("canvas");var context = canvas.getContext('2d');
获取当前系统时间，使用的是Data方法,
var now = new Date();var hour = now.getHours() > 12 ? now.getHours() - 12 : now.getHours();var min = now.getMinutes();var sec = now.getSeconds();
难点在于，秒针是需要每秒钟不停的转动的，秒针转动完了怎么让分针同步转动，同时带动时针转动一点点，实际上就是秒针
代码
<!DOCTYPE html><html><head><meta charset="utf-8"><title>canvas</title><style type="text/css">* {padding: 0;margin: 0;}#canvas{margin:100px 500px;/* background-color: #ee4e68; */}</style></head><body><div class="container"><canvas id="canvas" width="500" height="500"></canvas></div></body></html><script type="text/javascript">window.onload = function(){var canvas = document.getElementById("canvas");var context = canvas.getContext('2d');runClock();var timer = setInterval(runClock, 1000);//运行function runClock() {//清除之前的绘画context.clearRect(0, 0, canvas.width, canvas.height);drawClock();var now = new Date();var hour = now.getHours() > 12 ? now.getHours() - 12 : now.getHours();var min = now.getMinutes();var sec = now.getSeconds();// 时针context.lineWidth = "15";context.strokeStyle = "#000";//保存状态 坐标原点0,0context.save();//移动画布，改变坐标原点为250,250context.translate(canvas.width / 2, canvas.height / 2);context.rotate((hour + min / 60 + sec / 3600 ) / 6 * Math.PI);context.beginPath();context.moveTo(0, 0);context.lineTo(0, -110);context.stroke();//恢复状态 坐标原点回到0,0context.restore();//分针context.lineWidth = "10";context.strokeStyle = "#b6c978";context.save();context.translate(canvas.width / 2, canvas.height / 2);context.rotate((min + sec / 60) / 30 * Math.PI);context.beginPath();context.moveTo(0, 0);context.lineTo(0, -130);context.stroke();context.restore();//秒针context.lineWidth = "5";context.strokeStyle = "#e9e6b3";context.save();context.translate(canvas.width / 2, canvas.height / 2);context.rotate(sec / 30 * Math.PI);context.beginPath();context.moveTo(0, 0);context.lineTo(0, -160);context.stroke();context.restore();//中间的圆点context.beginPath();context.lineWidth = "10";context.strokeStyle = "#999";//顺时针falsecontext.arc(250, 250, 5, 0, 360, false);context.stroke();}//绘制表盘function drawClock() {context.beginPath();context.lineWidth = "10";context.strokeStyle = "#b490d0";context.arc(250, 250, 200, 0, 360, false);context.stroke();//下面要改变原点 所以先保存当前状态context.save();//改变原点context.translate(canvas.width / 2, canvas.height / 2);//时刻度for (var i = 1; i <= 12; i++){context.rotate( 1 / 6 * Math.PI);context.beginPath();// context.moveTo(0, -180);// context.lineTo(0, -200);context.moveTo(0, -170);context.lineTo(0, -190);context.stroke();// context.restore();}//分秒刻度context.lineWidth = "5";for (var i = 1; i <= 60; i++){// context.save();// context.rotate(i * 6 / 180 * Math.PI);context.rotate( 1 / 30 * Math.PI);context.beginPath();context.moveTo(0, -170);context.lineTo(0, -190);context.stroke();// context.restore();}//回复坐标原点为0,0context.restore();} }</script>
