HTML5canvas时钟实例

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

Hi-ZhiWei

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

阅读量915

点赞数

分类专栏： HTML5 文章标签： html5 canvas 实例

本文链接：https://blog.csdn.net/github_37578362/article/details/63775035

版权

HTML5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

直接放代码不太好，还是简单说说运用到的canvas知识

1、canvas 元素用于在网页上绘制图形。

<canvas id="c" width="1000" height="400"></canvas>

2、canvas2d环境下绘制

var oGC = oC.getContext('2d');

3、我要开始绘制路径啦

oGC.beginPath();

4、从画布的（x，y）点开始绘制路径

oGC.moveTo(x,y);

5、以（x，y）为圆心，r为半径，从0度画到360度。也就是一个圆咯

 oGC.arc(x,y,r,0,360*Math.PI/180,false);

6、结束绘制路径

   oGC.closePath();

7、用线把刚才的路径连起来

   oGC.stroke();

8、想把这条线变宽一点

   oGC.lineWidth = 3;

9、想给这个圆涂上白色（填充）

oGC.fillStyle= "#fff"

下面是实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{background: #000;}
        #c{background: #fff;}
    </style>
    <script>
        window.onload = function () {
            var oC = document.getElementById("c");
            var oGC = oC.getContext('2d');

            function toDraw() {
                var x = 200;
                var y = 200;
                var r = 150;
//              清除掉以前的画布内容，后面重新绘制从而实现动画效果
                oGC.clearRect(0,0,oC.width,oC.height);

                var oDate = new Date();
                var oHou = oDate.getHours();
                var oMin = oDate.getMinutes();
                var oSen = oDate.getSeconds();

                var oHoursValue = (-90 + oHou*30 +oMin/2)*Math.PI/180;
                var oMinsValue = (-90 + oMin*6)*Math.PI/180;
                var oSensValue = (-90 + oSen*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();

//              画一个填充白色的圆，半径是上面的19/20，从而遮挡里面的线条，达到显示小刻度的目的
                oGC.fillStyle = "#fff";
                oGC.beginPath();
                oGC.arc(x,y,r*19/20,0,360*Math.PI/180);
                oGC.closePath();
                oGC.fill();

//              画大刻度同理
                oGC.lineWidth = 3;
                oGC.beginPath();
                for(var i=0;i<60;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 = "#fff";
                oGC.beginPath();
                oGC.arc(x,y,r*18/20,0,360*Math.PI/180,false);
                oGC.closePath();
                oGC.fill();

//                画中心小圆点
                oGC.fillStyle = "#000";
                oGC.beginPath();
                oGC.arc(x,y,r*1/20,0,360*Math.PI/180,false);
                oGC.closePath();
                oGC.fill();

//                画时针
                oGC.lineWidth = 4;
                oGC.beginPath();
                oGC.moveTo(x,y);
                oGC.arc(x,y,r*10/20,oHoursValue,oHoursValue,false);
                oGC.closePath();
                oGC.stroke();

//                画分针
                oGC.lineWidth = 3;
                oGC.beginPath();
                oGC.moveTo(x,y);
                oGC.arc(x,y,r*14/20,oMinsValue,oMinsValue,false);
                oGC.closePath();
                oGC.stroke();

//                画秒针
                oGC.lineWidth = 1;
                oGC.beginPath();
                oGC.moveTo(x,y);
                oGC.arc(x,y,r*17/20,oSensValue,oSensValue,false);
                oGC.closePath();
                oGC.stroke();
            }
            setInterval(toDraw,1000);

            toDraw();
        }
    </script>
</head>
<body>
<canvas id="c" width="1000" height="400"></canvas>
</body>
</html>