IOS美区账号微信: springsunshine2017

前端技术 · 2021年3月17日 0

canvas入门:canvas画布绘制时钟

话不多少,先上效果,哈哈

接下来直接上源码,全部手码,喜欢的记得点个赞哦

代码张的难看?复制下来格式化一下不就好看了么,哈哈

<!DOCTYPE html><html lang=”en”>
<head>    <meta charset=”UTF-8″>    <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>    <title>Document</title>    <style>        canvas {            margin-top: 20%;            margin-left: 40%;            border: 1px solid #eee;        }    </style></head>
<body>    <canvas width=”300px” height=”300px” id=”myc”></canvas>    <script>        let dom = document.getElementById(‘myc’);        let ctx = dom.getContext(‘2d’);        let width = ctx.canvas.width;        let height = ctx.canvas.height;        var r = width / 2;        let rem = width/200;                        function drawBg() {            ctx.save();            ctx.translate(r, r);            ctx.beginPath();            ctx.lineWidth = 10*rem;            ctx.arc(0, 0, r – 5*rem, 0, 2 * Math.PI, false);            ctx.stroke();
            var hoursArray = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];            ctx.font = 18*rem+”px Arial”;            ctx.textAlign = ‘center’;            ctx.textBaseline = ‘middle’;            hoursArray.forEach((number, i) => {                let rad = 2 * Math.PI / 12 * i;                let x = Math.cos(rad) * (r – 30*rem);                let y = Math.sin(rad) * (r – 30*rem);                ctx.fillText(number, x, y);            });
            for (let i = 0; i < 60; i++) {                let rad = 2 * Math.PI / 60 * i;                let x = Math.cos(rad) * (r – 18*rem);                let y = Math.sin(rad) * (r – 18*rem);
                ctx.beginPath();                if (i % 5 === 0) {                    ctx.fillStyle = “#000”;                } else {                    ctx.fillStyle = “#999”;                };                ctx.arc(x, y, 2*rem, 0, 2 * Math.PI, false);                ctx.fill();            }        };                        function drawHour(hour, minute) {            ctx.save();            let rad = 2 * Math.PI / 12 * hour;            let mrad = 2 * Math.PI / 12 / 60 * minute;            ctx.rotate(rad + mrad);            ctx.beginPath();            ctx.lineWidth = 4*rem;            ctx.lineCap = “round”;            ctx.moveTo(0, 10*rem);            ctx.lineTo(0, -r * 3 / 7);            ctx.stroke();            ctx.restore();        };
                function drawMinute(minute) {            ctx.save();            let rad = 2 * Math.PI / 60 * minute;            ctx.rotate(rad);            ctx.beginPath();            ctx.lineWidth = 2*rem;            ctx.lineCap = “round”;            ctx.moveTo(0, 10*rem);            ctx.lineTo(0, -r * 4 / 7);            ctx.stroke();            ctx.restore();        };
                function drawSecond(secound) {            ctx.save();            ctx.beginPath();            let rad = 2 * Math.PI / 60 * secound;            ctx.lineWidth = 1;            ctx.fillStyle = “#000”;            ctx.rotate(rad);            ctx.moveTo(2, 20*rem);            ctx.lineTo(-2, 20*rem);            ctx.lineTo(-1, -r * 5 / 7);            ctx.lineTo(1, -r * 5 / 7);            ctx.fill();            ctx.restore();        };
                function drawDot() {            ctx.beginPath();            ctx.fillStyle = “#fff”;            ctx.arc(0, 0, 3*rem, 0, 2 * Math.PI, false);            ctx.fill();        };                        setInterval(() => {            let now = new Date();            let hour = now.getHours();            let minute = now.getMinutes();            let second = now.getSeconds();            ctx.clearRect(0, 0, width, height);
            drawBg();            drawHour(hour, minute);            drawMinute(minute);            drawSecond(second);            drawDot();            ctx.restore();        }, 500);    </script></body>
</html>

最后再说一下思路:

1、先画时钟的背景,包括大圆圈,1-12的数字,60个小点点

2、画时针

3、画分针

4、画秒针

5、画中间的小圆点

知识点说明:

1、有些同学对ctx.save()不了解,简单说一下,比如我们在drawBg()方法中使用了translate()对圆点进行了偏移,又对画笔的线条和颜色进行了设置,save()就是保存这些操作前的状态,然后使用restore()就是恢复save()前的状态。/2、这里用到的rem就是画布缩放的比例,比如canvas尺寸改变后,时钟能正常的等比例缩放。

2、计算时钟的坐标的时候需要使用到sin()以及cos();

3、rad变量计算的是弧度,这里不是角度

4、ctx.clearRect()这个方法就是每次绘制完后清空当前的画布,解决的是秒针绘制后保留路径的问题,如下图:

以上就是canvas入门:canvas画布绘制时钟的全部内容,欢迎大家一起讨论哈