利用canvas绘制钟表

最新推荐文章于 2024-06-04 14:00:25 发布

WXDEE

最新推荐文章于 2024-06-04 14:00:25 发布

阅读量491

点赞数 2

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

本文链接：https://blog.csdn.net/qq_29791893/article/details/78017584

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

利用canvas绘制一个钟表，钟表的指针是可以根据当前时间自己动的哦！

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <canvas id="canvas" width="500" height="500"></canvas>
    </body>
    <script type="text/javascript">
        window.onload = function() {
            var oCanvas = document.getElementById("canvas");
            var context = oCanvas.getContext("2d");

            //绘制钟表
            (function drawClock() {
                //根据浏览器的刷新频率，在一定时间之后执行，根据递归的思想，实现drawClock的反复调用，最终实现动画效果
                window.requestAnimationFrame(drawClock);

                //获取当前时间
                var time = new Date();
                var sec = time.getSeconds();
                var min = time.getMinutes() + sec / 60;
                var hour = time.getHours() + min / 60;

                //清空画布
                context.clearRect(0, 0, oCanvas.width, oCanvas.height);
                //将画板设为灰色
                context.fillStyle = "#eee";
                context.fillRect(0, 0, oCanvas.width, oCanvas.height);

                //绘制表盘
                context.beginPath();
                context.arc(250, 250, 200, 0, Math.PI * 2);
                context.lineWidth = 4;
                context.stroke();
                context.closePath();

                //储存context状态
                context.save();
                //将(250,250)转换成原点
                context.translate(250, 250);
                //绘制小时刻度
                for(var i = 0; i < 12; i++) {
                    //画线
                    context.beginPath();
                    context.moveTo(0, -195);
                    context.lineTo(0, -175);
                    context.lineWidth = 5;
                    context.stroke();
                    context.closePath();
                    //旋转画布
                    context.rotate(Math.PI / 6);
                }
                //恢复context状态
                context.restore();

                //储存context状态
                context.save();
                //将(250,250)转换成原点
                context.translate(250, 250);
                //绘制分钟刻度
                for(var i = 0; i < 60; i++) {
                    //画线
                    context.beginPath();
                    context.moveTo(0, -195);
                    context.lineTo(0, -185);
                    context.lineWidth = 3;
                    context.stroke();
                    context.closePath();
                    //旋转画布
                    context.rotate(Math.PI / 30);
                }
                //恢复context状态
                context.restore();

                //储存context状态
                context.save();
                //将(250,250)转换成原点
                context.translate(250, 250);
                //绘制时针
                context.beginPath();
                context.rotate(Math.PI / 6 * hour)
                context.moveTo(0, -155);
                context.lineTo(0, 20);
                context.lineWidth = 5;
                context.stroke();
                context.closePath();
                //恢复context状态
                context.restore();

                //储存context状态
                context.save();
                //将(250,250)转换成原点
                context.translate(250, 250);
                //绘制分针
                context.beginPath();
                context.rotate(Math.PI / 30 * min)
                context.moveTo(0, -160);
                context.lineTo(0, 25);
                context.lineWidth = 3;
                context.stroke();
                context.closePath();
                //恢复context状态
                context.restore();

                //储存context状态
                context.save();
                //将(250,250)转换成原点
                context.translate(250, 250);
                //绘制秒针
                context.beginPath();
                context.rotate(Math.PI / 30 * sec)
                context.moveTo(0, -165);
                context.lineTo(0, 30);
                context.lineWidth = 2;
                context.strokeStyle = "red";
                context.stroke();
                context.closePath();
                //恢复context状态
                context.restore();

                //储存context状态
                context.save();
                //将(250,250)转换成原点
                context.translate(250, 250);
                //绘制表盘中心圆圈
                context.beginPath();
                context.arc(0, 0, 5, 0, 2 * Math.PI);
                context.lineWidth = 3;
                context.strokeStyle = "red";
                context.stroke();
                context.fillStyle = "#fff";
                context.fill()
                context.closePath();

                //绘制秒针边上圆圈
                context.beginPath();
                context.rotate(Math.PI / 30 * sec)
                context.arc(0, -120, 5, 0, 2 * Math.PI);
                context.lineWidth = 3;
                context.stroke();
                context.fillStyle = "#fff";
                context.fill()
                context.closePath();
                //恢复context状态
                context.restore();
            })() //立即执行drawClock这个函数

            //实现蓝色小滑块的移动；
            var x = 0;
            var y = 0;
            (function move() {
                window.requestAnimationFrame(move);
                x += 1;
                y += 1;
                context.fillStyle = "#00A2E8";
                context.fillRect(x, y, 20, 20);
            })()
        }
    </script>
</html>

结果如下：
这里写图片描述

WXDEE

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
利用canvas绘制钟表

利用canvas绘制一个钟表，钟表的指针是可以根据当前时间自己动的哦！<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <canvas id="canvas" width="500" height="500"><
复制链接

扫一扫

专栏目录