                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /Html5
                        
                        /Canvas 繪制時(shí)鐘

可以轉(zhuǎn)動(dòng)，但是是按照時(shí)針來(lái)轉(zhuǎn)的，不是秒針？

qq_笑的狠牽強(qiáng)_0

2017-03-12

源自：Canvas 繪制時(shí)鐘 4-1

關(guān)注問(wèn)題我要回答

766

操作

收起

1 回答

照顧好自己
2017-03-15

下面的代碼是按照秒針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);