canvas小案例：钟表绘制

最新推荐文章于 2023-11-07 12:07:03 发布

原创最新推荐文章于 2023-11-07 12:07:03 发布 · 303 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#canvas

css3 专栏收录该内容

4 篇文章

订阅专栏

标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。

 <script>
     // 获取canvas元素
     var canvas = document.getElementById("mycanvas");
     // 设置绘制环境
     var ctx = canvas.getContext("2d");
 </script>

下面是一个canvasz综合小案例：绘制钟表，这里用到了很多canvas里的知识：平移（translate）、旋转（rotate）、绘制路径等等

<!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>
        /* #mycanvas{
            border: 1px solid red;
        } */
    </style>
</head>
<body>
    <canvas id="mycanvas"></canvas>
    <script>
        // 获取canvas元素
        var canvas = document.getElementById("mycanvas");
        // 设置绘制环境
        var ctx = canvas.getContext("2d");
        canvas.width = 600;
        canvas.height = 500;

        var year,month,day,hour,second,minute;
        // 绘制表盘
        function drawClock(){
            ctx.beginPath();
            ctx.lineWidth = 2;
            ctx.strokeStyle = '#333';
            //画表盘的外圆
            ctx.arc(300,200,146,0,2*Math.PI);
            ctx.stroke();
            ctx.closePath();
            ctx.beginPath();
            //画固定时分秒针的中心圆
            ctx.arc(300,200,6,0,2*Math.PI);
            ctx.fillStyle = '#333';
            ctx.fill();
            ctx.closePath();
        }
        
        // 绘制时刻度
        function drawClockHours(){
            for(var i = 0; i < 12; i++){
                ctx.save();
                //将原点平移到(300,200)
                ctx.translate(300,200);
                ctx.rotate(i*1/12*2*Math.PI);
                ctx.beginPath();
                ctx.lineWidth = 5;
                ctx.strokeStyle = '#333';
                //绘制刻度路径
                ctx.moveTo(0,-140);
                ctx.lineTo(0,-125);
                ctx.stroke();
                ctx.closePath();
                ctx.restore();
            }
        }
        
        // 绘制分刻度
        function drawClockMins(){
            for(var i = 0; i < 60; i++){
                ctx.save();
                //将原点平移到(300,200)
                ctx.translate(300,200);
                ctx.rotate(i*1/60*2*Math.PI);
                ctx.beginPath();
                ctx.lineWidth = 3;
                ctx.strokeStyle = '#333';
                ctx.moveTo(0,-140);
                ctx.lineTo(0,-133);
                ctx.stroke();
                ctx.closePath();
                ctx.restore();
            }
        }
        
        // 绘制时针
        function drawHours(){
            ctx.save();
            ctx.translate(300,200);
            ctx.rotate((hour*60*60+minute*60+second)/(12*60*60)*2*Math.PI);
            ctx.beginPath();
            ctx.strokeStyle = '#333';
            ctx.lineWidth = 3;
            ctx.moveTo(0,0);
            ctx.lineTo(0,-40);
            ctx.lineTo(5,-35);
            ctx.lineTo(-5,-35);
            ctx.lineTo(0,-40);
            ctx.stroke();
            ctx.fillStyle = "#333";
            ctx.fill();
            ctx.closePath();
            ctx.restore();
        }
        
        // 绘制分针
        function drawMinute(){
            ctx.save();
            ctx.translate(300,200);
            ctx.rotate((minute*60+second)/(60*60)*2*Math.PI);
            ctx.beginPath();
            ctx.strokeStyle = '#333';
            ctx.lineWidth = 2;
            ctx.moveTo(0,0);
            ctx.lineTo(0,-60);
            ctx.lineTo(5,-55);
            ctx.lineTo(-5,-55);
            ctx.lineTo(0,-60);
            ctx.stroke();
            ctx.fillStyle = "#333";
            ctx.fill();
            ctx.closePath();
            ctx.restore();
        }
        
        // 绘制秒针
        function drawSecond(){
            ctx.save();
            ctx.translate(300,200);
            ctx.rotate(second/60*2*Math.PI);
            ctx.beginPath();
            ctx.strokeStyle = 'red';
            ctx.lineWidth = 1;
            ctx.moveTo(0,0);
            ctx.lineTo(0,-80);
            ctx.lineTo(5,-75);
            ctx.lineTo(-5,-75);
            ctx.lineTo(0,-80);
            ctx.stroke();
            ctx.fillStyle = "red";
            ctx.fill();
            ctx.closePath();
            ctx.restore();
        }
        
        // 获取时间
        function getTimes(){
            var date = new Date();
            year = date.getFullYear();
            month = date.getMonth() + 1;
            day = date.getDate();
            hour = date.getHours();
            minute = date.getMinutes();
            second = date.getSeconds();
        }
        //定时器 可以让时钟动起来
        setInterval(function(){
            ctx.clearRect(0,0,600,500);
            drawClock();
            drawClockHours();
            drawClockMins();
            getTimes();
            drawHours();
            drawMinute();
            drawSecond();
        },1000);
    </script>
    
</body>
</html>