可以转动,但是是按照时针来转的,不是秒针?

来源:4-1 Canvas动态的时分秒

qq_笑的狠牵强_0

2017-03-12 16:50

可以转动,但是是按照时针来转的,不是秒针?

写回答 关注

1回答

  • 照顾好自己
    2017-03-15 11:46:42

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

    qq_笑的狠...

    多谢指导

    2017-04-06 08:37:10

    共 1 条回复 >

Canvas 绘制时钟

canvas画出漂亮的时钟,通过本教程能重新掌握一些几何知识

49750 学习 · 160 问题

查看课程

相似问题