canvas实现时钟效果

HTML5的canvas的实用入门小实例，一步步一起来。学习的最好方法就是实践，参考HTML 5 Canvas 参考手册，再加上自己的尝试和实践，马上就可以得到canvas时钟啦。在线演示

带阴影表盘

• 获取当前canvas的宽高 var width=ctx.canvas.width;
• 声明半径r时预留一些阴影和线宽的宽度 var r=width/2-8;
• 阴影：shadowBlur, shadowColor, shadowOffsetX, ctx.shadowOffsetY
• 渐变：createRadialGradient, addColorStop
• 圆：arc
• 圆周率，PI大写：Math.PI
• 重新映射中心 translate

刻度

• 把阴影去掉
• 重新从(0,0)开始，不然会从圆上3的位置开始ctx.beginPath();
• 刻度是一条条的线，用lineTo, stroke
• 刻度均匀分布表盘，需要计算角度，需要用到正弦余弦
  • 正弦sin=对边/斜边
  • 余弦cos=邻边/斜边
  • Math.sin()和Math.cos()中的角度是弧度，弧度=弧长/半径
• 整点的位置是5的倍数，用i%5==0判断

指针

• 指针是线，用lineTo, stroke
• 指针是旋转的，用rotate
• 指针帽是圆的，用ctx.lineCap="round";
• 需要开头ctx.save();，结尾ctx.restore();，否则起始的位置就变了
• 起始角在刻度3的位置，ctx.rotate(2*Math.PI/60*(min-15));
• 时针的位置也受分针影响，ctx.rotate(2*Math.PI/12*(hour-3)+2*Math.PI/12/60*min);
• 先旋转再画线
• 秒针比较细，用的是4个点描边和填充
• 理论上3个指针函数应该合并，但3个各有不同，我就不合并了。
• 指针固定的一端应该留一点长度，再加一个圆固定

让时钟动起来

• 获取当前时间new Date(); getHours(); getMinutes(); getSeconds()
• 设置定时器，每秒获取新的时间 setInterval()
• 但是会不停重叠地画上去， 每秒清除一次矩形：ctx.clearRect(0,0,width,height);

修饰完善

• 因为setInterval是隔1秒执行，所以要先执行一次，不然会停顿1秒才出现时钟。
• 注意哪些地方要save，哪些地方要restore，如何区分？
• 声明一个变量rem=width/300，使画布大小变化时，时钟仍然能够正常显示，注意半径r已经和width关联，无需再重复乘以这个参数rem。

完整代码

var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
var width=ctx.canvas.width;  //获取当前canvas的宽高
var height=ctx.canvas.height;
var rem=width/300; //比例，使时钟放大时保持外观一直
var r=width/2-8*rem;  //预留了阴影和线宽的位置；因为r已经是和width相关的，因此下面的r不需要再*rem

//画表盘
function drawBg(){
    ctx.save();
    ctx.translate(width/2,width/2);  //重新映射中心位置到canvas中间，默认是在左上角
    ctx.lineWidth=4*rem;
    ctx.shadowBlur=3*rem;
    ctx.shadowColor="#222";  //阴影的颜色深一点
    ctx.shadowOffsetX=3*rem;
    ctx.shadowOffsetY=3*rem;
    ctx.strokeStyle="#666";  //边框颜色
    var grd=ctx.createRadialGradient(0,0,10*rem,0,0,r); // 表示渐变范围是半径10到r的位置
    grd.addColorStop(0,"#fefefe");
    grd.addColorStop(1,"#dedede");
    ctx.fillStyle=grd;  //这一句不能少，填充的颜色是上面定义的渐变色
    ctx.arc(0,0,r,0,2*Math.PI);  //这里虽然想不通为什么，但的确是减去线宽的一半。
    ctx.stroke();
    ctx.fill();
    //ctx.restore();
}
//画刻度
function drawScale(){
    //ctx.save();
    ctx.shadowBlur = 0;
    ctx.shadowColor = "";
    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = 0;
    for(var i=0;i<60;i++){
        ctx.beginPath();
        if(i%5==0){
            ctx.strokeStyle="#222";
            ctx.lineWidth=4;
            ctx.lineTo((r-8*rem)*Math.cos(2*Math.PI/60*i),(r-8*rem)*Math.sin(2*Math.PI/60*i));
        }else{
            ctx.strokeStyle="#666";
            ctx.lineWidth=2;
            ctx.lineTo((r-4*rem)*Math.cos(2*Math.PI/60*i),(r-4*rem)*Math.sin(2*Math.PI/60*i));
        }
        ctx.lineTo(r*Math.cos(2*Math.PI/60*i),r*Math.sin(2*Math.PI/60*i));
        ctx.stroke();
    }
    //ctx.restore();
}
//画时针
function drawHour(hour,min){
    ctx.save();  //不加这个的话，分针直接从时针处开始算。
    ctx.beginPath();
    ctx.lineWidth=6*rem;
    ctx.lineCap="round";
    ctx.strokeStyle="#222";
    ctx.rotate(2*Math.PI/12*(hour-3)+2*Math.PI/12/60*min);  //起始角在3那里
    ctx.moveTo(-15*rem,0);
    ctx.lineTo(r/2,0);
    ctx.stroke();
    ctx.restore();
}
//画分针
function drawMin(min){
    ctx.save();
    ctx.beginPath();
    ctx.lineWidth=3*rem;
    ctx.lineCap="round";
    ctx.strokeStyle="#222";
    ctx.rotate(2*Math.PI/60*(min-15));  //起始角在3那里
    ctx.moveTo(-15*rem,0);
    ctx.lineTo(r/2+30*rem,0);
    ctx.stroke();
    ctx.restore();
}
//画秒针
function drawSec(sec){
    ctx.save();
    ctx.beginPath();
    ctx.fillStyle="#c14543";
    ctx.rotate(2*Math.PI/60*(sec-15));  //起始角在3那里
    ctx.moveTo(-15*rem,2*rem);
    ctx.lineTo(-15*rem,-2*rem);
    ctx.lineTo(r-8*rem,-1*rem);
    ctx.lineTo(r-8*rem,1*rem);
    ctx.fill();
    ctx.restore();
}
//画固定点
function drawDot(){
    ctx.beginPath();
    ctx.fillStyle="#fff";
    ctx.arc(0,0,6*rem,0,2*Math.PI);
    ctx.fill();
}
//画动态时钟
function draw(){
    ctx.clearRect(0,0,width,height); //每秒清除一次矩形
    var date=new Date();
    var h=date.getHours();
    var m=date.getMinutes();
    var s=date.getSeconds();
    drawBg();
    drawScale();
    drawHour(h,m);
    drawMin(m);
    drawSec(s);
    drawDot();
    ctx.restore();
}
//定时器
var timer=setInterval(draw, 1000);
draw(); //先执行一次，不然页面会卡一下。