原 canvas绘制clock

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

<!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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏码匠的流水账

spring security ajax登录及返回

本文讲述一下如何自定义spring security的登录页,网上给的资料大多过时,而且是基于后端模板技术的,讲的不是太清晰,本文给出一个采用ajax的登录及返...

1532
来自专栏码匠的流水账

聊聊spring security的permitAll以及webIgnore

本文主要聊一下spring security的permitAll以及webIgnore的区别

1331
来自专栏技术专栏

Spring boot+Spring security+JJWT 实现restful风格的权限验证

https://github.com/MarkGao11520/spring-boot-security-restful

6361
来自专栏JadePeng的技术博客

Spring Security 架构与源码分析

Spring Security 主要实现了Authentication(认证,解决who are you? ) 和 Access Control(访问控制,也就...

1080
来自专栏码匠的流水账

spring security设置login的ajax返回

612
来自专栏码匠的流水账

spring security免登录动态配置方案2

之前有篇文章讲了怎么进行免登录动态配置的方案,动用了反射去实现,有点黑魔法的味道,这里再介绍另外一种方案

1031
来自专栏一个会写诗的程序员的博客

页面获取Spring Security登录用户

spring security 把SPRING_SECURITY_CONTEXT 放入了session 没有直接把username 放进去。下面一段代码主要描述...

723
来自专栏小尘哥的专栏

springboot+jjwt+security完美解决restful接口无状态鉴权

springboot本身已经提供了很好的spring security的支持,我们只需要实现(或者重写)一部分接口来实现我们的个性化设置即可。本文浅显易懂,没有...

5064
来自专栏清晨我上码

重写request设置自定义超时

2754
来自专栏码匠的流水账

聊聊SecurityContextPersistenceFilter

本文主要研究下SecurityContextPersistenceFilter的作用。

782

扫码关注云+社区