Canvas 时钟

最新推荐文章于 2022-04-21 19:21:06 发布

Joke丿而已

最新推荐文章于 2022-04-21 19:21:06 发布

阅读量311

点赞数 1

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

本文链接：https://blog.csdn.net/xiaoquan1224/article/details/52950445

版权

canvas 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

之前学习了下html5中的canvas元素，为了练练手就实现了一个简易的时钟。时钟本身并不复杂，也没有使用图片进行美化，不过麻雀虽小五脏俱全，下面就与大家分享一下：

效果图如下：

先获取canvas DOM, 设置绘图环境，目前还只有2d；

        var myCanvas = document.querySelector('#myCanvas');
        var context = myCanvas.getContext('2d'); //设置绘制环境

画表盘：
简单的说就是画一个圆框做一个渐变给里面填充颜色


            //线性渐变
            var lan = context.createLinearGradient(200, 0, 800, 600);
            lan.addColorStop(0.4, '#C71585');
            lan.addColorStop(0.2, '#00BFFF');
            lan.addColorStop(0.6, '#FF0000');
            lan.addColorStop(0.8, '#006400');
            lan.addColorStop(0.9, '#D2691E');

            //阴影 
            context.shadowOffsetX = 0; //X 轴的偏移量
            context.shadowOffsetY = 0; //Y 轴的偏移量
            context.shadowColor = 'greenyellow'; //阴影颜色
            context.shadowBlur = 40; //阴影的宽度

            //表盘
            context.beginPath(); //开始绘制
            context.lineWidth = 20; //线宽
            context.strokeStyle = lan; //线条的样式
            context.fillStyle = 'bisque'; //填充的样式
            context.arc(300, 300, 250, 0, 360 * Math.PI / 180); //表盘的位置及大小
            context.fill(); //填充样式
            context.stroke(); //绘制线条
            context.closePath(); //结束绘制 并形成一个封闭的图形

画时针刻度：
因为小时刻度是要在表盘上旋转分布的，所以我们要设一个中心原点，以原点为中心，表针可以旋转指向某个时刻，当然，刻度不只有一个，所以我们用for循环的方式，画出12条线段，旋转角度说明一下，弧度 = 角度*Math.PI/180

    //时针刻度
    for(var i = 0; i < 12; i++) {
        context.save();//设置旋转环境
        context.strokeStyle = 'black';
        context.lineWidth = 10;
        context.translate(300, 300);//设置异次元空间的原点
        context.rotate(30 * i * Math.PI / 180);//设置旋转角度

        context.beginPath();
        context.moveTo(0, -220);//划线开始  （0， -220）
        context.lineTo(0, -240);//划线结束   （0， -240）
        context.stroke();
        context.restore();//将旋转之后的元素放回原画布
    }

分针刻度：
原理跟时刻的是一样的，只是角度不一样

    //分针刻度
    for(var i = 0; i < 60; i++) {
        context.save();//设置旋转环境
        context.strokeStyle = 'black';
        context.lineWidth = 6;
        context.translate(300, 300);//设置异次元空间的原点
        context.rotate(6 * i * Math.PI / 180);

        context.beginPath();
        context.moveTo(0, -230);
        context.lineTo(0, -240);
        context.stroke();
        context.restore();//将旋转之后的元素放回原画布
    }

画时针：
时针现在实际上就是画一个直线，因为要旋转，所以是在异次元空间设置原点

    //时钟
    context.save();//设置旋转环境
    context.translate(300, 300);
    context.rotate(30 * Math.PI);//设置异次元空间的原点
    context.strokeStyle = 'black';
    context.lineWidth = 10;

    context.beginPath();
    context.moveTo(0, -160);
    context.lineTo(0, 20);
    context.stroke();
    context.restore();//将旋转之后的元素放回原画布

画分针：
分针和时针画法一样只是比时针长一点


    //分针
    context.save();
    context.translate(300, 300);
    context.rotate( 60 * Math.PI / 180);
    context.strokeStyle = 'blue';
    context.lineWidth = 8;

    context.beginPath();
    context.moveTo(0, -200);
    context.lineTo(0, 20);
    context.stroke();
    context.restore();

画秒针：
方法还是和时针一样

        //秒针 
        context.save();
        context.translate(300, 300);
        context.rotate(sor * 6 * Math.PI / 180);
        context.strokeStyle = 'red';
        context.lineWidth = 5;

        context.beginPath();
        context.moveTo(0, -230);
        context.lineTo(0, 30);
        context.stroke();
        context.restore();
        //在中间添加一个圆点
        context.beginPath();
        context.strokeStyle = 'red';
        context.fillStyle = 'white';
        context.lineWidth = 5;
        context.arc(300, 300, 8, 0, 2 * Math.PI);
        context.stroke();
        context.fill();

时钟到这里就画完了，接下来就是要让它动起来

    //获取时间当地
    var data = new Date();
    var hour = data.getHours();//当前小时
    var min = data.getMinutes();//当前分钟
    var sor = data.getSeconds();//当前秒

在秒钟走的时候会对分针有影响，秒针转360度，分针转6度，所以分针走的度数应该为：分针 * 6 * Math.PI / 180 + 秒 * 6 * Math.PI / 180 / 60；同理，时钟走的度数应该为：小时 * 30 * Math.PI / 180 + 分钟 * 6 * Math.PI / 180 / 12。

要动起来我们需要用到setInterval()函数，那我们将我们写的代码用一个函数包起来，这样就简洁了，但是不包含开始的2句

虽然现在能够动起来了，但问题也出现了看图

这里写图片描述

就是这样出现了好多针怎么会这样呢？你的是这样吗？是这样就对了，原因是每一次指针旋转都是画上去的，走一步画一步，就出现了像扇子一样的东西，所以我们要在画图之前清空画布，就是画之前清掉前面画的

context.clearRect(0, 0, 600, 600);//清空画板

这个是什么意思呢，实际上是2个坐标，0,0 和 600,600 对应整个画布；

那这样应该就万事大吉了吧，不，没有，好像出来的时候慢了点，要等一会才出来，你的是这样吗，是这样啊，是这样就对了，因为我们在他动之前让他把表画出来，所以执行setInterval（）函数时需要1秒之后才开始画，这就是为什么要等大概1秒针才出现的原因，解决方法，在setInterval（）前执行drawClock()函数；

为了大家方便看最后附上完整代码：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <canvas id="myCanvas" width="600" height="600" style="background: gray;">您的浏览器当前版本不支持canvas表签</canvas>
    </body>
    <script type="text/javascript">
        var myCanvas = document.querySelector('#myCanvas');
        var context = myCanvas.getContext('2d'); //设置绘制环境
        function drawClock() {
            context.clearRect(0, 0, 600, 600); //清空画板
            //线性渐变
            var lan = context.createLinearGradient(200, 0, 800, 600);
            lan.addColorStop(0.4, '#C71585');
            lan.addColorStop(0.2, '#00BFFF');
            lan.addColorStop(0.6, '#FF0000');
            lan.addColorStop(0.8, '#006400');
            lan.addColorStop(0.9, '#D2691E');

            //阴影 
            context.shadowOffsetX = 0; //X 轴的偏移量
            context.shadowOffsetY = 0; //Y 轴的偏移量
            context.shadowColor = 'greenyellow'; //阴影颜色
            context.shadowBlur = 40; //阴影的宽度

            //表盘
            context.beginPath(); //开始绘制
            context.lineWidth = 20; //线宽
            context.strokeStyle = lan; //线条的样式
            context.fillStyle = 'bisque'; //填充的样式
            context.arc(300, 300, 250, 0, 360 * Math.PI / 180); //表盘的位置及大小
            context.fill(); //填充样式
            context.stroke(); //绘制线条
            context.closePath(); //结束绘制 并形成一个封闭的图形

            //时针刻度
            for(var i = 0; i < 12; i++) {
                context.save(); //设置旋转环境
                context.strokeStyle = 'black';
                context.lineWidth = 10;
                context.translate(300, 300); //设置异次元空间的原点
                context.rotate(30 * i * Math.PI / 180); //设置旋转角度

                context.beginPath();
                context.moveTo(0, -220); //划线开始  （0， -220）
                context.lineTo(0, -240); //划线结束   （0， -240）
                context.stroke();
                context.restore(); //将旋转之后的元素放回原画布
            }

            //分针刻度
            for(var i = 0; i < 60; i++) {
                context.save(); //设置旋转环境
                context.strokeStyle = 'black';
                context.lineWidth = 6;
                context.translate(300, 300); //设置异次元空间的原点
                context.rotate(6 * i * Math.PI / 180);

                context.beginPath();
                context.moveTo(0, -230);
                context.lineTo(0, -240);
                context.stroke();
                context.restore(); //将旋转之后的元素放回原画布
            }

            //获取时间
            var data = new Date();
            var hour = data.getHours(); //当前小时
            var min = data.getMinutes(); //当前分钟
            var sor = data.getSeconds(); //当前秒

            //时钟
            context.save(); //设置旋转环境
            context.translate(300, 300);
            context.rotate(hour * 30 * Math.PI / 180 + min * 6 * Math.PI / 180 / 12); //设置异次元空间的原点
            context.strokeStyle = 'black';
            context.lineWidth = 10;

            context.beginPath();
            context.moveTo(0, -160);
            context.lineTo(0, 20);
            context.stroke();
            context.restore(); //将旋转之后的元素放回原画布

            //分针
            context.save();
            context.translate(300, 300);
            context.rotate(min * 6 * Math.PI / 180 + sor * 6 * Math.PI / 180 / 60);
            context.strokeStyle = 'blue';
            context.lineWidth = 8;

            context.beginPath();
            context.moveTo(0, -200);
            context.lineTo(0, 20);
            context.stroke();
            context.restore();

            //秒针 
            context.save();
            context.translate(300, 300);
            context.rotate(sor * 6 * Math.PI / 180);
            context.strokeStyle = 'red';
            context.lineWidth = 5;

            context.beginPath();
            context.moveTo(0, -230);
            context.lineTo(0, 30);
            context.stroke();
            context.restore();

            context.beginPath();
            context.strokeStyle = 'red';
            context.fillStyle = 'white';
            context.lineWidth = 5;
            context.arc(300, 300, 8, 0, 2 * Math.PI);
            context.stroke();
            context.fill();
        }
        drawClock()
        setInterval(drawClock, 1000);
    </script>

</html>