HTML5canvas时钟实例

直接放代码不太好,还是简单说说运用到的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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值