标签：canvas ctx 画布 html let 360 radius lineWidth Math

示例10：绘制时钟

<canvas id="canvas"
            width="600"
            height="600"></canvas>

    <script>
        let canvas = document.querySelector('#canvas');
        let ctx = canvas.getContext('2d');
        let width = canvas.width
        let height = canvas.height

        // 绘制内容区域相对画布的大小 80%
        let scale = 0.8;

        // 计算半径
        let radius = Math.floor(Math.min(width, height) * scale * 0.5);
        console.log('radius', radius);

        // 绘制外边框
        // ctx.beginPath();
        // ctx.strokeRect(0, 0, width, height);
        // ctx.closePath()


        // 绘制时钟刻度
        function drawClockScale({
            number = 12,
            strokeStyle = 'black',
            lineWidth = 3,
            lineLength = 20,
        }) {
            ctx.save();

            ctx.strokeStyle = strokeStyle;
            ctx.lineWidth = lineWidth;
            let rotateAngle = (360 / number);

            for (let i = 0; i < number; i++) {
                ctx.rotate((Math.PI / 180) * rotateAngle);
                ctx.beginPath();
                ctx.moveTo(radius - lineLength, 0);
                ctx.lineTo(radius, 0);
                ctx.stroke();
                ctx.closePath()
            }

            ctx.restore();
        }

        function drawClock() {
            ctx.clearRect(0, 0, width, height);

            ctx.save();
            // 将坐标轴原点移动到画布中心
            ctx.translate(width / 2, height / 2);
            // 旋转坐标轴x指向画布正上方
            ctx.rotate(-Math.PI / 180 * 90);



            // 分针和秒针的刻度
            drawClockScale({
                number: 60,
                strokeStyle: 'green',
                lineWidth: 4,
                lineLength: 14
            });

            // 时针刻度
            drawClockScale({
                number: 12,
                strokeStyle: 'red',
                lineWidth: 8,
                lineLength: 20
            });

            // 绘制指针
            let now = new Date();
            let hour = now.getHours();
            let minute = now.getMinutes();
            let second = now.getSeconds();

            console.log(`${hour}: ${minute}: ${second}`);

            // 绘制秒针
            ctx.save();
            ctx.beginPath();
            ctx.rotate((Math.PI / 180) * (360 / 60) * second);
            ctx.strokeStyle = "deepskyblue";
            ctx.lineWidth = 2;
            ctx.moveTo(-20, 0);
            ctx.lineTo(radius - 30, 0);
            ctx.stroke();
            ctx.closePath()
            ctx.restore();

            // 绘制分针
            ctx.save();
            ctx.rotate((Math.PI / 180) * ((360 / 60) * minute + (360 / 60 / 60) * second));
            ctx.beginPath();

            ctx.strokeStyle = "green";
            ctx.lineWidth = 4;
            ctx.moveTo(-20, 0);
            ctx.lineTo(radius - 40, 0);
            ctx.stroke();

            ctx.closePath()
            ctx.restore();

            // 处理成12小时制
            if (hour > 12) {
                hour = hour - 12
            }

            // 绘制时针
            ctx.save();
            ctx.beginPath();
            ctx.rotate((Math.PI / 180) * ((360 / 12) * hour + (360 / 12 / 60) * minute + (360 / 12 / 60 / 60) *
                second));
            ctx.strokeStyle = "red";
            ctx.lineWidth = 8;
            ctx.moveTo(-20, 0);
            ctx.lineTo(radius - 50, 0);
            ctx.stroke();
            ctx.closePath()
            ctx.restore();

            // 绘制圆心
            ctx.beginPath();
            ctx.fillStyle = "grey";
            ctx.lineWidth = 10;
            ctx.arc(0, 0, 10, 0, Math.PI / 180 * 360);
            ctx.fill();
            ctx.closePath()

            // 绘制圆
            ctx.beginPath();
            ctx.strokeStyle = "grey";
            ctx.lineWidth = 10;
            ctx.arc(0, 0, radius, 0, Math.PI / 180 * 360);
            ctx.stroke();
            ctx.closePath()
            
            ctx.restore();
        }

        // 每隔1秒重绘一次
        setInterval(() => {
            drawClock();
        }, 1000)
    </script>

需要修改坐标轴之前，最好把当前状态保存，绘制完成后再恢复

标签：canvas,ctx,画布,html,let,360,radius,lineWidth,Math
来源： https://blog.csdn.net/mouday/article/details/122265346

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。