html5画布手绘时钟,html5 canvas绘画时钟

functioninit(){var canvas = document.getElementById("canvas"),

context= canvas.getContext("2d");

setInterval(function(){draw(canvas, context)},1000);

}functiondraw(canvas, context){var x =canvas.width,

y=canvas.height,

r= Math.min(x/2, y/2);

context.clearRect(0, 0, x, y); //清除绘画历史

//绘画钟框

context.fillStyle = "#f1f1f1";

drawCircle(context, x, y, r);//绘画文字

var tx = x/2,ty = y/2,tr = 0.8*r;

context.font= "bold 12px 微软雅黑";

context.fillStyle= "#000";

drawText(context,"1", tx + 0.5*tr,ty - 0.866*tr);

drawText(context,"2", tx + 0.866*tr, ty - 0.5*tr);

drawText(context,"3", tx +tr, ty);

drawText(context,"4", tx + 0.866*tr, ty + 0.5*tr);

drawText(context,"5", tx + 0.5*tr, ty + 0.866*tr);

drawText(context,"6", tx, ty +tr);

drawText(context,"7", tx - 0.5*tr, ty + 0.866*tr);

drawText(context,"8", tx - 0.866*tr, ty + 0.5*tr);

drawText(context,"9", tx -tr, ty);

drawText(context,"10", tx - 0.866*tr, ty - 0.5*tr);

drawText(context,"11", tx - 0.5*tr, ty - 0.866*tr);

drawText(context,"12", tx, ty -tr);//获取当前时间

var date = newDate(),

h=date.getHours(),

m=date.getMinutes(),

s=date.getSeconds(),

angleH= (360/12)*Math.PI/180,

angleM= (360/60)*Math.PI/180context.strokeSyle= "#000";//绘制时刻度

drawScale(context, x, y, r, angleH, -0.88*r, -0.96*r, 3, 12);//绘制分刻度

drawScale(context, x, y, r, angleM, -0.93*r, -0.96*r, 1, 60);//绘画时分秒针

drawCircle(context, x, y, 3);

drawNeedle(context, x, y, r, h*angleH + m*angleM/12, -0.5*r);

drawNeedle(context, x, y, r, m*angleM + s*angleM/60, -0.6*r);

drawNeedle(context, x, y, r, s*angleM, -0.75*r);

}//绘画圆

functiondrawCircle(context, x, y, r){

context.save();

context.beginPath();

context.arc(x/2, y/2, r, 0, Math.PI*2, 0);

context.fill();

context.closePath();

context.restore();

}//绘画文字方法

functiondrawText(context, text, x, y){

context.save();

x-= (context.measureText(text).width/2);

y += 4;

context.translate(x, y);

context.fillText(text,0, 0);

context.restore();

}//绘制刻度方法

functiondrawScale(context, x, y, r, rotate, start, end, lineWidth, loop){

context.save();

context.beginPath();

context.translate(x/2,y/2);

context.lineWidth=lineWidth;for (var i = 0; i < loop; i++) {

context.rotate(rotate);

context.moveTo(0, start);

context.lineTo(0, end);

}

context.closePath();

context.stroke();

context.restore();

}//绘画时分秒针方法

functiondrawNeedle(context, x, y, r, rotate, line){

context.save();

context.translate(x/2,y/2);

context.beginPath();

context.rotate(rotate);

context.moveTo(0, 0.1*r);

context.lineTo(0, line);

context.closePath();

context.stroke();

context.restore();

}