canvas绘制时钟

最新推荐文章于 2020-08-01 16:25:11 发布

空忧

最新推荐文章于 2020-08-01 16:25:11 发布

阅读量133

点赞数

分类专栏： web前端文章标签： html5

本文链接：https://blog.csdn.net/qq_44216701/article/details/105474914

版权

web前端专栏收录该内容

54 篇文章 0 订阅

订阅专栏

1.创建canvas标签

<canvas id="can2" width="500" height="500"></canvas>

javascript实现功能
2.获取画布canvas，获取画笔ctx

var canvas = document.getElementById("can2");
var ctx = canvas.getContext("2d");

3.要用定时器不断绘制，创建一个函数drawclock
进入异次元绘画，画出刻度盘

ctx.save();
        ctx.clearRect(0,0,500,500);
        ctx.translate(250, 250);
        ctx.rotate(-Math.PI / 2);
        ctx.lineWidth = 6;
        ctx.strokeStyle = "blue";
        ctx.lineCap = "round";
        for (var i = 0; i < 12; i++) {
            ctx.beginPath();
            ctx.rotate(Math.PI / 6);
            ctx.moveTo(200, 0);
            ctx.lineTo(220, 0);
            ctx.stroke();
        }
        for (var k = 0; k < 60; k++) {
            ctx.strokeStyle = "red";
            ctx.beginPath();
            ctx.rotate(Math.PI / 30);
            ctx.moveTo(218, 0);
            ctx.lineTo(220, 0);
            ctx.stroke();
        }

首先新建一个日期对象，获取时、分、秒三个变量！

var time = new Date();
        var s = time.getSeconds();
        var m = time.getMinutes();
        var h = time.getHours();
 if (h > 12) {
            h -= 12;
        }

进入异次元画时针

ctx.save();
        ctx.lineWidth = 9;
        ctx.beginPath();
        ctx.rotate(h * (Math.PI / 6) + (Math.PI / 360) * m + (Math.PI / 21600) * s);
        ctx.moveTo(-20, 0);
        ctx.lineTo(160, 0);
        ctx.stroke();
        ctx.restore();

进入异次元画分针

ctx.save();
        ctx.lineWidth = 7;
        ctx.beginPath();
        ctx.rotate((Math.PI / 30) * m + (Math.PI / 1800) * s);
        ctx.moveTo(-20, 0);
        ctx.lineTo(212, 0);
        ctx.stroke();
        ctx.restore();

进入异次元画秒针

ctx.save();
        ctx.lineWidth = 6;
        ctx.strokeStyle = "green";
        ctx.beginPath();
        ctx.rotate((Math.PI / 30) * s);
        ctx.moveTo(-30, 0);
        ctx.lineTo(120, 0);
        ctx.stroke();
        ctx.restore();

加载定时器

 setInterval("drawclock()",1000);

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>practice</title>
    <style>
        canvas{
            border: 2px solid white;

        }
        body{
            text-align: center;
        }
    </style>
</head>
<body >

<h3 >时钟</h3>
<canvas id="can2" width="500" height="500"></canvas>
<script>
    var canvas = document.getElementById("can2");
    var ctx = canvas.getContext("2d");
    drawclock(); //此处先引用函数是为了防止加载完页面的第一秒有空白画面。
    function drawclock() {
        ctx.save();
        ctx.clearRect(0,0,500,500);
        ctx.translate(250, 250);
        ctx.rotate(-Math.PI / 2);
        ctx.lineWidth = 6;
        ctx.strokeStyle = "blue";
        ctx.lineCap = "round";
        for (var i = 0; i < 12; i++) {
            ctx.beginPath();
            ctx.rotate(Math.PI / 6);
            ctx.moveTo(200, 0);
            ctx.lineTo(220, 0);
            ctx.stroke();
        }
        for (var k = 0; k < 60; k++) {
            ctx.strokeStyle = "red";
            ctx.beginPath();
            ctx.rotate(Math.PI / 30);
            ctx.moveTo(218, 0);
            ctx.lineTo(220, 0);
            ctx.stroke();
        }
        var time = new Date();
        var s = time.getSeconds();
        var m = time.getMinutes();
        var h = time.getHours();
        if (h > 12) {
            h -= 12;
        }
//                    时针的角度=360/12*小时+360/12/60分钟+360/12/60/60秒;
//                    换算成弧度
//                    时针的弧度= π/6*小时+π/360*分钟+π/21600*秒
        ctx.save();
        ctx.lineWidth = 9;
        ctx.beginPath();
        ctx.rotate(h * (Math.PI / 6) + (Math.PI / 360) * m + (Math.PI / 21600) * s);
        ctx.moveTo(-20, 0);
        ctx.lineTo(160, 0);
        ctx.stroke();
        ctx.restore();
//                    分针的角度=360/60*分钟+360/60/60*秒
//                    分针的弧度 =π/30*分钟+π/1800*秒
        ctx.save();
        ctx.lineWidth = 7;
        ctx.beginPath();
        ctx.rotate((Math.PI / 30) * m + (Math.PI / 1800) * s);
        ctx.moveTo(-20, 0);
        ctx.lineTo(212, 0);
        ctx.stroke();
        ctx.restore();
//                    秒针的角度=360/60*秒
                    秒针的弧度 =π/30*秒
        ctx.save();
        ctx.lineWidth = 6;
        ctx.strokeStyle = "green";
        ctx.beginPath();
        ctx.rotate((Math.PI / 30) * s);
        ctx.moveTo(-30, 0);
        ctx.lineTo(120, 0);
        ctx.stroke();
        ctx.restore();
//                    在钟表中心绘制一个圆点.
        ctx.beginPath();
        ctx.arc(0, 0, 10, 0, Math.PI * 2, true);
        ctx.fillStyle = "yellow";
        ctx.fill();
        ctx.restore();
//数字时间
        ctx.beginPath();
        // 设置字体
        ctx.font = "25px bold 黑体";
        // 设置颜色
        ctx.fillStyle = "red";
        // 设置水平对齐方式
        ctx.textAlign = "center";
        // 设置垂直对齐方式
        ctx.textBaseline = "middle";
        // 绘制文字（参数：要写的字，x坐标，y坐标）
        var h2=h+12;
        if (h2<10) {
              h1="0"+h2;
        }else{
            h1=h2;
        }
        if (m<10) {
              m1="0"+m;
        }else{
            m1=m;
        }
        if (s<10) {
              s1="0"+s;
        }else{
            s1=s;
        }
        ctx.fillText(h1, 200, 100);
        ctx.fillText(":", 225, 98);
        ctx.fillText(m1, 250, 100);
        ctx.fillText(":", 275, 98);
        ctx.fillText(s1, 300, 100);
        ctx.restore();
    }
    setInterval("drawclock()",1000);
</script>
</body>
</html>

空忧

关注

0
点赞
踩
0

收藏

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

1.创建canvas标签<canvas id="can2" width="500" height="500"></canvas>javascript实现功能2.获取画布canvas，获取画笔ctxvar canvas = document.getElementById("can2");var ctx = canvas.getContext("2d");3.要...
复制链接

扫一扫