使用canvas绘制风景时钟

最新推荐文章于 2024-07-02 22:34:09 发布

think_you_WL

最新推荐文章于 2024-07-02 22:34:09 发布

阅读量1.4k

点赞数 4

文章标签： canvas html javascript html5

本文链接：https://blog.csdn.net/think_you_WL/article/details/78843730

版权

风景时钟
这里写图片描述

实现代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .content{
            width: 600px;
            height: 600px;
            border: 1px solid green;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div class="content">
    <canvas id="canvas" width="600" height="600"></canvas>
</div>
<script>

    var canvas = document.querySelector("#canvas");
    var cxt = canvas.getContext("2d");
    var img=new Image();
    img.src="img/1.jpg";
    img.onload=function(){
        clock();
        setInterval(clock,1000);

    };
    function clock(){
        //获取当前时间
        var date = new Date();
        var h = date.getHours();
        h = h>=12?h-12:h;
        var m = date.getMinutes();
        var s = date.getSeconds();
        h += m / 60;

//将圆心坐标移到中心位置
        cxt.clearRect(0,0,canvas.width,canvas.height);
        cxt.save();
        cxt.translate(300,300);

        //绘制表盘
        cxt.beginPath();
        cxt.arc(0,0,280,0,2*Math.PI);
        cxt.lineWidth="10";
        cxt.strokeStyle="blue";
        cxt.stroke();
        cxt.closePath();

        cxt.clip();
        cxt.drawImage(img,-280,-280,600,600);
        img.onload=function(){
            cxt.drawImage(img,0,0)
        };
        //绘制分刻度

        for(var i=0;i<60;i++){
            cxt.save();
            cxt.rotate(Math.PI*2/360*6*i);
            cxt.beginPath();
            cxt.moveTo(0,-260);
            cxt.lineTo(0,-274);
            cxt.strokeStyle="yellow";
            cxt.stroke();
            cxt.closePath();
            cxt.restore();
        }
        //绘制时刻度

        for(var i=0;i<12;i++){
            cxt.save();
            cxt.rotate(Math.PI*2/360*30*i);
            cxt.beginPath();
            cxt.moveTo(0,-250);
            cxt.lineTo(0,-274);
            cxt.strokeStyle="yellow";
            cxt.stroke();
            cxt.closePath();
            cxt.restore();
        }
        //绘制时针
        cxt.save();
        cxt.rotate(Math.PI/180*30*h);
        cxt.beginPath();
        cxt.moveTo(0,20);
        cxt.lineTo(0,-140);
        cxt.lineWidth="12";
        cxt.strokeStyle="rgb(9,0,82)";
        cxt.stroke();
        cxt.closePath();
        cxt.restore();
        //绘制分针
        cxt.save();
        cxt.rotate(Math.PI/180*6*m);
        cxt.beginPath();
        cxt.moveTo(0,20);
        cxt.lineTo(0,-160);
        cxt.lineWidth="10";
        cxt.strokeStyle="rgb(98,255,116)";
        cxt.stroke();
        cxt.closePath();
        cxt.restore();
        //绘制秒针

        cxt.save();
        cxt.rotate(Math.PI/180*6*s);
        cxt.beginPath();
        cxt.moveTo(0,20);
        cxt.lineTo(0,-200);
        cxt.lineWidth="5";
        cxt.strokeStyle="red";
        cxt.stroke();
        cxt.closePath();

        //绘制秒针上的小圆
        cxt.beginPath();
        cxt.arc(0,-160,7,0,2*Math.PI);
        cxt.fillStyle="yellow";
        cxt.lineWidth="5";
        cxt.fill();
        cxt.stroke();
        cxt.closePath();
        //绘制圆心上的圆
        cxt.beginPath();
        cxt.arc(0,0,7,0,2*Math.PI);
        cxt.fillStyle="yellow";
        cxt.lineWidth="5";
        cxt.fill();
        cxt.stroke();
        cxt.closePath();
        cxt.restore();
        cxt.restore();
    }


</script>
</body>
</html>