canvas绘制一个简单钟表

最新推荐文章于 2024-08-14 23:24:59 发布

baibaider

最新推荐文章于 2024-08-14 23:24:59 发布

阅读量1.5k

点赞数

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

本文链接：https://blog.csdn.net/baibaider/article/details/79590649

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

css：

<style>
        body{background: black}
        #c1{background: white;}
        span{color: white;}
</style>

html：

<canvas id="c1" width="400" height="400">
    <span>不支持的浏览器</span>
    <!-- span标签里为不支持的浏览器可以看到的内容 -->
</canvas>

js：

<script>
    var oC = document.getElementById("c1");  //获取到canvas元素
    var oGc = oC.getContext("2d");  //创建一个2d空间

    setInterval(Time,1000);  //每隔一秒调用一次
    function Time(){
        var nowTime = new Date();
        var nH = nowTime.getHours(); //获得当前小时
        var nM = nowTime.getMinutes(); //获得当前分钟数
        var nS = nowTime.getSeconds();//获得当前秒数

        oGc.clearRect(0,0,400,400); //结束绘制路径（闭合绘图）,开始先清一遍防止重合越来越多
        oGc.beginPath(); //开始绘制路径（防止后面设置影响上面绘图）
        oGc.arc(200,200,150,0,360*Math.PI/180,false);  //PI是 π，false为顺时针 150为半径长度
//    oGc.beginPath();  //加上外面的圆就不见了
        for(var i = 0; i < 60; i++){
            oGc.moveTo(200,200);  //将表中心移到画布的中心
            oGc.arc(200,200,150,i*6*Math.PI/180,i*6*Math.PI/180,false);//绘制圆，arc(x,y,半径,起始弧度,结束弧度,旋转方向)，起始位置在3点钟位置，顺时针（默认：false）
        }
        //最外面一圈的圆
        oGc.stroke();  //画线，默认黑色
        oGc.beginPath();
        oGc.fillStyle = "#fff"; //填充颜色
        oGc.arc(200,200,150*19/20,0,360*Math.PI/180,false);
        oGc.fill();  //结束画线
        //12个小短线和里面的小小短线
        oGc.beginPath();
        oGc.lineWidth = "3";
        for(var i = 0;i<12;i++){
            oGc.moveTo(200,200);
            oGc.arc(200,200,150,i*30*Math.PI/180,i*30*Math.PI/180,false);
        }
        oGc.stroke();
        oGc.fillStyle = "#fff";
        oGc.arc(200,200,150*18/20,0,360*Math.PI/180,false);
        oGc.fill();
        //时针
        oGc.beginPath();
        oGc.lineWidth = "5";
        oGc.moveTo(200,200);
        oGc.arc(200,200,150*10/20,(nH*30+nM/2-90)*Math.PI/180,(nH*30+nM/2-90)*Math.PI/180,false);
        oGc.stroke();
        //分针
        oGc.beginPath();
        oGc.lineWidth = "5";
        oGc.moveTo(200,200);
        oGc.arc(200,200,150*13/20,(nM*6+nS/10-90)*Math.PI/180,(nM*6+nS/10-90)*Math.PI/180,false);
        oGc.stroke();
        //秒针
        oGc.beginPath();
        oGc.lineWidth = "5";
        oGc.moveTo(200,200);
        oGc.arc(200,200,150*16/20,(nS*6-90)*Math.PI/180,(nS*6-90)*Math.PI/180,false);
        oGc.stroke();
    }
</script>

样式：