64.canvas画一个表（1）

梦里梦外; 2021-12-05 00:53 264阅读 0赞

![918206-20190515220319806-96068074.png][]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            body {
                margin: 0;
                padding: 0;
                text-align: center;
            }
        </style>
    </head>
    
    <body>
        <canvas id="canvas"></canvas>
        <script>
            let canvasWidth = 600;
            let canvasHeight = 600;
            let centerX = canvasWidth / 2;
            let centerY = canvasHeight / 2;
            let r = canvasWidth / 2 - 4;
            let canvas = document.getElementById('canvas');
            canvas.width = canvasWidth;
            canvas.height = canvasHeight;
            let ctx = canvas.getContext('2d');
    
            function setCanvasStrokeStyle() {
    
            }
    
            function drawClock() {
                ctx.beginPath();
                ctx.strokeStyle = "orange";
                ctx.lineWidth = 4;
                ctx.arc(centerX, centerY, r, 0, Math.PI * 2, true);
                ctx.stroke()
            }
    
            function drawHours() {
                let rad = 2 * Math.PI / 12
                for (let i = 1; i <= 12; i++) {
                    ctx.save();
                    ctx.beginPath();
                    ctx.translate(centerX, centerY);
                    ctx.rotate(rad * i)
                    ctx.translate(-centerX, -centerY);
                    ctx.strokeStyle = "orange";
                    ctx.lineWidth = 4;
                    ctx.moveTo(centerX, centerY - r);
                    ctx.lineTo(centerX, centerY - r + 24);
                    ctx.font = "26px Arial";
                    ctx.textAlign = "center";
                    ctx.fillStyle = "orange";
                    ctx.fillText(i, centerX, centerY - r + 54);
                    ctx.stroke();
                    ctx.restore()
    
                }
            }
    
            function drawMinutes() {
                let rad = 2 * Math.PI / 60
                for (let i = 1; i <= 60; i++) {
                    ctx.save();
                    ctx.beginPath();
                    ctx.translate(centerX, centerY);
                    ctx.rotate(rad * i)
                    ctx.translate(-centerX, -centerY);
                    ctx.strokeStyle = "orange";
                    ctx.lineWidth = 2;
                    ctx.moveTo(centerX, centerY - r);
                    ctx.lineTo(centerX, centerY - r + 16);
                    ctx.stroke();
                    ctx.restore()
    
                }
            }
            // 画时针 分针 秒针
            function drawTimeLine() {
                ctx.beginPath();
                ctx.arc(centerX, centerY, 20, 0, Math.PI * 2, true);
                ctx.fillStyle = "orange";
                ctx.fill();
                // 时针
                ctx.save()
                ctx.beginPath();
                ctx.lineWidth = 10;
                ctx.translate(centerX, centerY);
                ctx.rotate(Math.PI / 4)
                ctx.translate(-centerX, -centerY);
                ctx.moveTo(centerX, centerY);
                ctx.lineTo(centerX, centerY - r + 148);
                ctx.stroke();
                ctx.restore()
                    // 分针
                ctx.save()
    
                ctx.beginPath();
                ctx.translate(centerX, centerY);
                ctx.rotate(Math.PI / 2)
                ctx.translate(-centerX, -centerY);
                ctx.lineWidth = 6;
                ctx.moveTo(centerX, centerY);
                ctx.lineTo(centerX, centerY - r + 108);
                ctx.stroke();
                ctx.restore()
    
                // 秒针
                ctx.beginPath();
                ctx.lineWidth = 4;
                ctx.moveTo(centerX, centerY);
                ctx.lineTo(centerX, centerY - r + 68);
                ctx.stroke();
    
            }
            drawClock();
            drawHours();
            drawMinutes();
            drawTimeLine();
        </script>
    </body>
    
    </html>

转载于:https://www.cnblogs.com/famLiu/p/10872529.html

[918206-20190515220319806-96068074.png]: /images/20211205/e51342d642474b478a164ade0c1dbcc8.png