canvas绘制走动的时针

作者: 陆家嘴种菜 | 来源:发表于2017-03-24 21:21 被阅读103次

    首先上个效果图

    看了大家的评论,这次一定要来一个完整优化版的了。(没有看过上一篇文章的亲爱的们,可以回去看一下哦)

    首先对于大家提出的时针和分针要走的准确一点,每一个小时的跨度要慢慢的移动,而不是直接跳过5个刻度

    时针的完善:

    这里首先时针的话是每一个小时走5个刻度线,也就是30度,那么分钟走一圈,时针走30度,就要把这30度均匀的分成60等份。随着分钟的增加均匀的走动。所以时钟的绘制应该是context.rotate(m*Math.PI/360 + h*30*Math.PI/180); 原本的度数再加上分钟已经走过的。

    分针的完善:

    分针每50秒走一个刻度线,那么就将这一刻度再均匀的分成60等份,秒钟走一刻度,分钟就走六十分之一刻度。也就是s*(6*Math.PI/180)/60。再加上分钟自己的度数简化一下:ctx.rotate(s*Math.PI/1800 + m*6*Math.PI/180);

    下面来瞅一眼部分js代码

    //时针

    context.save();

    context.beginPath();

    context.translate(250, 250);

    context.rotate(m*Math.PI/360 + h*30*Math.PI/180);

    context.lineWidth=10;

    context.lineCap="round";

    context.strokeStyle="green";

    context.moveTo(0, 0);

    context.lineTo(0,-100);

    context.stroke();

    context.restore();

    //分针

    context.save();

    context.beginPath();

    context.translate(250, 250);

    // 自己的度数+秒针走过的度数

    // 秒针走过的度数:s*Math.PI/1800

    context.rotate(s*Math.PI/1800+m*6*Math.PI/180);

    context.strokeStyle="pink";

    context.lineWidth=7;

    context.lineCap="round";

    context.moveTo(0, 0);

    context.lineTo(0,-120);

    context.stroke();

    context.restore();

    //秒针

    context.save();

    context.beginPath();

    context.translate(250, 250);

    context.rotate(s*6*Math.PI/180);

    context.strokeStyle="yellow";

    context.lineWidth=4;

    context.lineCap="round";

    context.moveTo(0, 0);

    context.lineTo(150,0);

    context.stroke();

    context.restore();

    如果还没有懂的话可以加Q群(295383988),来获取源码哦。

    相关文章

      网友评论

        本文标题:canvas绘制走动的时针

        本文链接:https://www.haomeiwen.com/subject/yuhqottx.html