首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >原 canvas绘制clock

原 canvas绘制clock

作者头像
魂祭心
发布2018-05-17 17:40:15
1.3K0
发布2018-05-17 17:40:15
举报
文章被收录于专栏:魂祭心魂祭心

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

<!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>
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档