用canvas画一个时钟
用canvas画一个时钟
此篇内容假定你已经有了一定的canvas基础了，如果还没有，请参考canvas基础知识点(一)；
写在前面：
Canvas 的状态是以堆(stack)的方式保存的，每一次调用
save()方法，当前的状态就会被推入堆中保存起来,这些状态包括移动、旋转、缩放等。而对应的restore()方法会将上一个保存的状态从堆栈中弹出，恢复了canvas的初始状态，不会影响后续的绘图。
用到的几个方法：
(1).ctx.scale():缩放当前绘图至更大或更小;
var ctx = document.getElementById("canvas").getContext('2d');
ctx.strokeRect(5,5,55,55);
ctx.scale(2,2);
ctx.strokeRect(5,5,55,55);效果：
(2).ctx.translate(x,y):重新映射画布上的 (0,0) 位置到(x,y),默认的(0,0)点在画布的左上角，使用这个方法之后(0,0)点映射到了(x,y)点；
例如：
var ctx = document.getElementById("canvas").getContext('2d');
ctx.fillRect(25,25,100,100);
ctx.save();
ctx.restore();
ctx.translate(100,100);
ctx.fillRect(25,25,100,100);效果：
(3).ctx.rotate():旋转当前的绘图。
var ctx = canvas.getContext('2d');
ctx.rotate(20*Math.PI/180);
ctx.fillRect(50,20,100,50); 效果：
(4).window.requestAnimationFrame():这个方法告诉浏览器要执行动画，并请求浏览器调用指定的函数在下一次重绘之前更新动画。该方法将在重绘之前调用的回调作为参数。被调用的频率是每秒60次。简单来说就是浏览器秒调用绘图函数60次。
附上时钟的代码：
<body>
<canvas id="canvas" width="600" height="600">canvas>
body>
<script type="text/javascript">
function clock(){
var ctx = document.getElementById("canvas").getContext("2d");
ctx.restore();
ctx.save();
ctx.lineWidth = 4;
ctx.strokeStyle = "#ccc";
ctx.clearRect(0,0,600,600); //清除画布
ctx.translate(100,100);
ctx.scale(0.4,0.4);
ctx.rotate(-Math.PI/2);
ctx.save();
//小时
for(var i=0;i<12;i++){
ctx.beginPath();
ctx.rotate(Math.PI/6);
ctx.moveTo(200,0);
ctx.lineTo(215,0);
ctx.stroke();
}
ctx.restore();
ctx.save();
//分钟
ctx.lineWidth = 2;
for(var i=0;i<60;i++){
if(i%5 != 0){
ctx.beginPath();
ctx.moveTo(200,0);
ctx.lineTo(207,0);
ctx.stroke();
}
ctx.rotate(Math.PI/30);
}
ctx.restore();
ctx.save();
var now = new Date();
var hour = now.getHours();
var sec = now.getSeconds();
var min = now.getMinutes();
hour = hour >= 12 ? hour - 12 :hour;
//时针
ctx.strokeStyle = "#999";
ctx.rotate(hour*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec );
ctx.lineWidth = 10;
ctx.beginPath();
ctx.moveTo(-20,0);
ctx.lineTo(80,0);
ctx.stroke();
ctx.restore();
ctx.save()
//分针
ctx.strokeStyle = "#aaa";
ctx.rotate(min*(Math.PI/30) + (Math.PI/21600)*sec);
ctx.lineWidth = 8;
ctx.beginPath();
ctx.moveTo(-20,0);
ctx.lineTo(100,0);
ctx.stroke();
ctx.restore();
ctx.save();
//秒
ctx.strokeStyle = "#999";
ctx.rotate(sec*(Math.PI/30));
ctx.lineWidth = 5;
ctx.beginPath();
ctx.moveTo(-20,0);
ctx.lineTo(120,0);
ctx.stroke();
//圆
ctx.beginPath();
ctx.arc(0,0,215,0,2*Math.PI);
ctx.stroke();
ctx.restore();
window.requestAnimationFrame(clock);
}
window.requestAnimationFrame(clock);
script>效果请戳这里;