qq_笑的狠牵强_0
2017-03-12 16:50
可以转动,但是是按照时针来转的,不是秒针?
下面的代码是按照秒针rotate:
function drawHour(hour,minute,second){ ctx.save(); ctx.beginPath();
var rad=2*Math.PI/12*hour;
var srad=2*Math.PI/60/60*second;
var mrad=2*Math.PI/12/60*minute+srad;
ctx.rotate(rad+mrad);
ctx.lineWidth=6; ctx.lineCap='round'; ctx.moveTo(0,10*rem); ctx.lineTo(0,-r/2); ctx.stroke(); ctx.restore(); }
function drawMinute(minute,second){ ctx.save();
var rad=2*Math.PI/60*minute;
var srad=2*Math.PI/60/60*second;
ctx.rotate(rad+srad);
ctx.beginPath(); ctx.lineWidth=3; ctx.lineCap='round'; ctx.moveTo(0,20*rem); ctx.lineTo(0,-r/4*3); ctx.stroke(); ctx.restore(); }
function drawSecond(second){ ctx.save(); ctx.fillStyle="#c12345" var rad=2*Math.PI/60*second; ctx.rotate(rad); ctx.beginPath(); ctx.moveTo(-2,20*rem); ctx.lineTo(2,20*rem); ctx.lineTo(1,-r+18*rem); ctx.lineTo(-1,-r+18*rem); ctx.fill(); ctx.restore(); } function drawDot(){ ctx.beginPath(); ctx.fillStyle="#fff"; ctx.arc(0,0,3,0,2*Math.PI,false); ctx.fill(); } function draw(){ ctx.save(); ctx.clearRect(0,0,width,height); var now=new Date(); var hour=now.getHours(); var minute=now.getMinutes(); var second=now.getSeconds(); drawBackground(); drawHour(hour,minute,second); drawMinute(minute,second); drawSecond(second); drawDot(); ctx.restore(); } draw(); setInterval(draw,1000);
Canvas 绘制时钟
49750 学习 · 160 问题
相似问题