社区首页 >专栏 >原 canvas绘制clock

原 canvas绘制clock

魂祭心

发布于 2018-05-17 09:40:15

1.4K00

代码可运行

文章被收录于专栏：魂祭心魂祭心

运行总次数：0

代码可运行

之前看人做了，觉得蛮有意思的，自己也实现一个玩玩。

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name=description content="">
<meta name=viewport content="width=device-width, initial-scale=1">
    <title>钟表</title>
</head>
<style>
body{
    background-color: black;
}
.wrap{
    position: absolute;
    background-color: silver;
    left: 30%;
    width: 40%;
}

</style>
<body>
     <div class="wrap">
          <canvas id="clock">your browser does not support the canvas tag </canvas>
     </div>

</body>
<script>    

    var obj=document.getElementsByClassName('wrap')[0];
    obj.style.height=obj.offsetWidth+'px';
    obj.style.width=obj.offsetWidth+'px';   
    var len=obj.offsetWidth;
    var canvas=document.getElementById('clock');
    canvas.height=len;
    canvas.width=len;
    var ctx=canvas.getContext("2d");
    canvas.globalCompositeOperation = 'source-atop';

 var Clock={
    Init:function(contain,canvas){
       //画边沿
       ctx.lineWidth = 3;
      ctx.strokeStyle = 'black'; 
      ctx.beginPath();
      ctx.arc(len/2,len/2,len/2,0,2*Math.PI);
      ctx.closePath();
      ctx.stroke();
      //画圆环
      ctx.beginPath();
      ctx.arc(len/2,len/2,len/2,0,2*Math.PI);
      ctx.closePath();
      ctx.fillStyle = 'rgba(0, 0, 255, 0.25)';
      ctx.fill();

       //画刻度
          //分针
          ctx.lineWidth = 1;
          ctx.strokeStyle = 'green';
            for(var i=0;i<60;i++){
                var du=Math.PI*(i*6)/180;

                var h=len/2-Math.cos(du)*(len/2);
                var w=len/2+Math.sin(du)*(len/2);

                var mh=len/2-Math.cos(du)*(len/2-10);
                var mw=len/2+Math.sin(du)*(len/2-10);

                ctx.beginPath();
                ctx.moveTo(mw,mh);
                ctx.lineTo(w,h);
                ctx.stroke();
            }
         //时针
         ctx.lineWidth = 3;
            ctx.strokeStyle = 'pink'
            for(var i=0;i<12;i++){
                var du=Math.PI*(i*30)/180;
                var h=len/2-Math.cos(du)*(len/2);
                var w=len/2+Math.sin(du)*(len/2);

                var mh=len/2-Math.cos(du)*(len/2-20);
                var mw=len/2+Math.sin(du)*(len/2-20);

                ctx.beginPath();
                ctx.moveTo(mw,mh);
                ctx.lineTo(w,h);
                ctx.stroke();
            }
      //覆盖
      ctx.beginPath();
      ctx.arc(len/2,len/2,len/2-30,0,2*Math.PI);
      ctx.closePath();
      ctx.fillStyle = 'silver';
      ctx.fill();
      //装饰
      ctx.drawImage(img,len/4,len/4,len/2,len/2);  
      //画中心点
      ctx.beginPath();
      ctx.arc(len/2,len/2,5,0,2*Math.PI);
      ctx.closePath();
      ctx.fillStyle = 'black';
      ctx.fill();       
    },
    DrawTime:function(){
        var date=new Date();
        var hour=date.getHours();
        var minute=date.getMinutes();
        var second=date.getSeconds();
        //秒针位置
        ctx.lineWidth = 1;
        ctx.strokeStyle = 'black';
        var secondDu=Math.PI*(second*6)/180;
        var mh=len/2-Math.cos(secondDu)*(len/2-30);
        var mw=len/2+Math.sin(secondDu)*(len/2-30);
        ctx.beginPath();
        ctx.moveTo(len/2,len/2);
        ctx.lineTo(mw,mh);
        ctx.stroke();
        //分针位置
        ctx.lineWidth = 2;
        ctx.strokeStyle = 'black';
        var minuteDu=Math.PI*(minute*6)/180;
        mh=len/2-Math.cos(minuteDu)*(len/2-30);
        mw=len/2+Math.sin(minuteDu)*(len/2-30);
        ctx.beginPath();
        ctx.moveTo(len/2,len/2);
        ctx.lineTo(mw,mh);
        ctx.stroke();
        //时针位置
        ctx.lineWidth = 3;
        ctx.strokeStyle = 'black';
        var hourDu=Math.PI*(minute/60*30+hour*30)/180;
        mh=len/2-Math.cos(hourDu)*(len/2-30);
        mw=len/2+Math.sin(hourDu)*(len/2-30);
        ctx.beginPath();
        ctx.moveTo(len/2,len/2);
        ctx.lineTo(mw,mh);
        ctx.stroke();
    },
    Clear:function(){
          ctx.clearRect(0,0,len,len);
    }
 };
 
     function render() {  
          Clock.Clear();
          Clock.Init();
          Clock.DrawTime();
          requestAnimationFrame(render);  
        };

      var img=new Image(); 
      img.src="xy.png";  
      img.onload = function () //确保图片已经加载完毕  
      {  
            render();
      };


</script>
</html>