利用canvas实现钟表效果

最新推荐文章于 2024-07-13 09:43:34 发布

冰雪为融

最新推荐文章于 2024-07-13 09:43:34 发布

阅读量327

点赞数

分类专栏： canvas 文章标签： js canvas

本文链接：https://blog.csdn.net/lhjuejiang/article/details/79712143

版权

canvas 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

今天学习了基础的canvas，发现canvas很有意思，具体的知识点先不总结，等我学完了一起总结，先上一个自己写的小实例，嗯、直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>钟表效果</title>
    <style>
        body{background:black;}
        #c1{background:white; border-radius:50%;}
    </style>
</head>
<body>
<canvas id="c1" width="400" height="400">
    <span>
        该浏览器不支持canvas
    </span>
</canvas>
<script>
    var oC = document.getElementById('c1');
    var oGc = oC.getContext('2d');
    var x = 200;
    var y = 200;
    var r = 150;

    clock();
    setInterval(clock,1000);
function clock(){
    oGc.clearRect(0,0,oC.width,oC.height);//清楚画布中的内容
    var oDate = new Date();
    var oHour =( -90+oDate.getHours()*30+oDate.getMinutes()/2)*Math.PI/180;
    var oMin =( -90+oDate.getMinutes()*6)*Math.PI/180;
    var oSec = (-90+oDate.getSeconds()*6)*Math.PI/180;//获取弧度数
    oGc.beginPath();
    for(var i=0; i<60; i++){//画短线
        oGc.moveTo(x,y);
        oGc.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);
    }
    oGc.closePath();
    oGc.stroke();
    oGc.fillStyle = "white";//用白色填充的圆覆盖大圆的线条
    oGc.beginPath();
    oGc.moveTo(x,y);
    oGc.arc(x,y,r*19/20,0,360,false);
    oGc.closePath();
    oGc.fill();
    oGc.beginPath();
    for(var i=0; i<12; i++){//长一点的线
        oGc.moveTo(x,y);
        oGc.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);

    }
    oGc.closePath();
    oGc.stroke();
    oGc.fillStyle = "white";//用上面同样的方法覆盖
    oGc.beginPath();
    oGc.moveTo(x,y);
    oGc.arc(x,y,r*18/20,0,360,false);
    oGc.closePath();
    oGc.fill();



    oGc.lineWidth = 4;
    oGc.beginPath();
    oGc.moveTo(x,y);
    oGc.arc(x,y,r*8/20,oHour,oHour,false);//时针
    oGc.closePath();
    oGc.stroke();
    oGc.lineWidth = 2;
    oGc.beginPath();
    oGc.moveTo(x,y);
    oGc.arc(x,y,r*12/20,oMin,oMin,false);//分针
    oGc.closePath();
    oGc.stroke();
    oGc.save();//用save()和restore()方法，防止第二次时所有线条都变为红色的
    oGc.lineWidth = 1;
    oGc.strokeStyle = "red";
    oGc.beginPath();
    oGc.moveTo(x,y);
    oGc.arc(x,y,r*14/20,oSec,oSec,false);//秒针
    oGc.closePath();
    oGc.stroke();
    oGc.restore();
    oGc.lineWidth = 1;
    oGc.fillStyle = "black";
    oGc.beginPath();
    oGc.moveTo(x,y);
    oGc.arc(x,y,r*2/50,0,360,false);
    oGc.closePath();
    oGc.fill();

}


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

冰雪为融

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用canvas实现钟表效果

今天学习了基础的canvas，发现canvas很有意思，具体的知识点先不总结，等我学完了一起总结，先上一个自己写的小实例，嗯、直接上代码&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;钟表效果&lt;/title&a
复制链接

扫一扫

专栏目录