用canvas画一个时钟

最新推荐文章于 2023-03-31 00:12:35 发布

eidolons

最新推荐文章于 2023-03-31 00:12:35 发布

阅读量435

点赞数

分类专栏： html5 canvas 文章标签： canvas html5

本文链接：https://blog.csdn.net/eidolons/article/details/72037118

版权

html5 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

canvas

4 篇文章 0 订阅

订阅专栏

用canvas画一个时钟

此篇内容假定你已经有了一定的canvas基础了，如果还没有，请参考canvas基础知识点(一)；

写在前面：

Canvas 的状态是以堆(stack)的方式保存的，每一次调用 save() 方法，当前的状态就会被推入堆中保存起来,这些状态包括移动、旋转、缩放等。而对应的restore()方法会将上一个保存的状态从堆栈中弹出，恢复了canvas的初始状态，不会影响后续的绘图。

用到的几个方法：

(1).ctx.scale():缩放当前绘图至更大或更小;

var ctx = document.getElementById("canvas").getContext('2d');   
ctx.strokeRect(5,5,55,55);
ctx.scale(2,2);
ctx.strokeRect(5,5,55,55);

效果：

效果图

(2).ctx.translate(x,y):重新映射画布上的 (0,0) 位置到(x,y),默认的(0,0)点在画布的左上角，使用这个方法之后(0,0)点映射到了(x,y)点；

例如：

var ctx = document.getElementById("canvas").getContext('2d');   
ctx.fillRect(25,25,100,100);
ctx.save();
ctx.restore();

ctx.translate(100,100);
ctx.fillRect(25,25,100,100);

效果：
效果图
(3).ctx.rotate():旋转当前的绘图。

var ctx = canvas.getContext('2d');
ctx.rotate(20*Math.PI/180);
ctx.fillRect(50,20,100,50);

效果：

效果图

(4).window.requestAnimationFrame():这个方法告诉浏览器要执行动画，并请求浏览器调用指定的函数在下一次重绘之前更新动画。该方法将在重绘之前调用的回调作为参数。被调用的频率是每秒60次。简单来说就是浏览器秒调用绘图函数60次。

附上时钟的代码：

<body>
<canvas id="canvas" width="600" height="600"></canvas>
</body>
<script type="text/javascript">
    function clock(){
        var ctx = document.getElementById("canvas").getContext("2d");
        ctx.restore();
        ctx.save();
        ctx.lineWidth = 4;
        ctx.strokeStyle = "#ccc";
        ctx.clearRect(0,0,600,600); //清除画布
        ctx.translate(100,100);
        ctx.scale(0.4,0.4);
        ctx.rotate(-Math.PI/2);

        ctx.save();


        //小时
        for(var i=0;i<12;i++){
            ctx.beginPath();
            ctx.rotate(Math.PI/6);
            ctx.moveTo(200,0);
            ctx.lineTo(215,0);
            ctx.stroke();
        }
        ctx.restore();
        ctx.save();

        //分钟
        ctx.lineWidth = 2;
        for(var i=0;i<60;i++){
            if(i%5 != 0){
                ctx.beginPath();
                ctx.moveTo(200,0);
                ctx.lineTo(207,0);
                ctx.stroke();
            }
            ctx.rotate(Math.PI/30);
        }
        ctx.restore();
        ctx.save();

        var now = new Date();
        var hour = now.getHours();
        var sec = now.getSeconds();
        var min = now.getMinutes();

        hour = hour >= 12 ? hour - 12 :hour;

        //时针
        ctx.strokeStyle = "#999";
        ctx.rotate(hour*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec );
        ctx.lineWidth = 10;
        ctx.beginPath();
        ctx.moveTo(-20,0);
        ctx.lineTo(80,0);
        ctx.stroke();

        ctx.restore();
        ctx.save()
        //分针
        ctx.strokeStyle = "#aaa";
        ctx.rotate(min*(Math.PI/30) + (Math.PI/21600)*sec);
        ctx.lineWidth = 8;
        ctx.beginPath();
        ctx.moveTo(-20,0);
        ctx.lineTo(100,0);
        ctx.stroke();
        ctx.restore();
        ctx.save();

        //秒
        ctx.strokeStyle = "#999";
        ctx.rotate(sec*(Math.PI/30));
        ctx.lineWidth = 5;
        ctx.beginPath();
        ctx.moveTo(-20,0);
        ctx.lineTo(120,0);
        ctx.stroke();

        //圆
        ctx.beginPath();
        ctx.arc(0,0,215,0,2*Math.PI);
        ctx.stroke();
        ctx.restore();

        window.requestAnimationFrame(clock);
    }
    window.requestAnimationFrame(clock);

</script>

效果请戳这里;

eidolons

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用canvas画一个时钟

用canvas画一个时钟此篇内容假定你已经有了一定的canvas基础了，如果还没有，请参考canvas基础知识点(一)；写在前面： Canvas 的状态是以堆(stack)的方式保存的，每一次调用 save() 方法，当前的状态就会被推入堆中保存起来,这些状态包括移动、旋转、缩放等。而对应的restore()方法会将上一个保存的状态从堆栈中弹出，恢复了canvas的初始状态，不会影响后续的绘图。
复制链接

扫一扫