使用canvas标签，制作一个简易的小时钟

最新推荐文章于 2022-04-18 15:41:39 发布

甜甜圈的小饼干

最新推荐文章于 2022-04-18 15:41:39 发布

阅读量256

点赞数

CC 4.0 BY-SA版权

分类专栏：个人领悟

本文链接：https://blog.youkuaiyun.com/fzt12138/article/details/90475689

个人领悟专栏收录该内容

54 篇文章

订阅专栏

本文介绍了HTML 5的canvas标签的应用，利用JavaScript在网页上绘制图像。通过在body标签中创建canvas标签并给定宽高和id，再建立script标签定义方法，用代码绘制出一个时钟，最后将代码写在body标签中实现效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

canvas标签的应用
在html页面创建一个小时钟
什么是 Canvas？
HTML 5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
首先，需要在body标签中创建一个canvas标签，自由给定其宽高，由于该画布的绘制需要在java script中通过代码进行操作，故需给定一个id。

<body>
    <div>
        <canvas width="600" height="600" id="mycanvas"></canvas>
    </div>

然后建立一个script标签，在该标签中定义方法，利用代码绘制出一个时钟

    <script>
        function show(){
            //获取画布
        var mycanvas=document.getElementById("mycanvas");
            //getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
        var ctx=mycanvas.getContext("2d");
            //在画布上绘制 600x600 的矩形，从左上角开始 (0,0)。
        ctx.clearRect(0,0,600,600);
        ctx.beginPath();
            //画一个圆
        ctx.arc(250,250,200,0,Math.PI*2,false);
        ctx.strokeStyle="#000";
        ctx.lineWidth="10";
        ctx.stroke();
        ctx.closePath();
            //创建当前时间对象
        var date=new Date();
            //获取小时
        var shi=date.getHours();
            //获取分
        var fen=date.getMinutes();
            //获取秒
        var miao=date.getSeconds();
            //利用循环画出小时的刻度
        for(var i=0;i<12;i++){
            ctx.save();
            ctx.beginPath();
            
            ctx.lineWidth="7";
            ctx.strokeStyle="#fff";

            ctx.translate(250,250);
            ctx.rotate(i*Math.PI/6);

            ctx.lineTo(0,-170);
            ctx.lineTo(0,-190)
            
            ctx.stroke();
            ctx.restore();
            ctx.closePath();
        }
            //利用循环画出分的刻度
        for(var i=0;i<60;i++){
            ctx.save();
            ctx.beginPath();
            
            ctx.lineWidth="7";
            ctx.strokeStyle="#fff";

            ctx.translate(250,250);
            ctx.rotate(i*Math.PI/30);

            ctx.lineTo(0,-180);
            ctx.lineTo(0,-190)
            
            ctx.stroke();
            ctx.restore();
            ctx.closePath();
        }
        // 绘制中心点
        ctx.beginPath()   
        ctx.strokeStyle="#f00";
        ctx.fillStyle="yellow";
        ctx.arc(250,250,6,0,Math.PI*2,false);
        ctx.lineWidth="2";
        ctx.fill();
        ctx.stroke();
        ctx.closePath();
        // 绘制时针
        ctx.save();
        ctx.beginPath();
        ctx.lineWidth="6";
        ctx.strokeStyle="#fff";
        ctx.translate(250,250);
        ctx.rotate((shi+fen/60)*Math.PI/6);
        ctx.lineTo(0,-7);
        ctx.lineTo(0,-125) 
        ctx.stroke();
        ctx.restore();
        ctx.closePath();
        // 分针
        ctx.save();
        ctx.beginPath();
        ctx.lineWidth="4";
        ctx.strokeStyle="#000";
        ctx.translate(250,250);
        ctx.rotate((fen+miao/60)*Math.PI/30);
        ctx.lineTo(0,-7);
        ctx.lineTo(0,-140) 
        ctx.stroke();
        ctx.restore();
        ctx.closePath();
        // 秒针
        ctx.save();
        ctx.beginPath();
        ctx.lineWidth="2";
        ctx.strokeStyle="red";
        ctx.translate(250,250);
        ctx.rotate(miao*Math.PI/30);
        ctx.lineTo(0,-7);
        ctx.lineTo(0,-160) 
        ctx.stroke();
        ctx.restore();
        ctx.closePath();
        }
        //调用绘图方法
        setInterval(show,1000)
    </script>

将该代码写在body标签中。
效果图：
在这里插入图片描述