原 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 条评论
登录 后参与评论

相关文章

来自专栏一个爱瞎折腾的程序猿

sqlserver使用存储过程跟踪SQL

USE [master] GO /****** Object: StoredProcedure [dbo].[sp_perfworkload_trace_s...

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

Spring Reactor 项目核心库Reactor Core

Non-Blocking Reactive Streams Foundation for the JVM both implementing a Reactiv...

2732
来自专栏飞扬的花生

jsencrypt参数前端加密c#解密

      写程序时一般是通过form表单或者ajax方式将参数提交到服务器进行验证,如何防止提交的请求不被抓包后串改,虽然无法说绝对安全却给非法提交提高了难度...

4179
来自专栏Ceph对象存储方案

Luminous版本PG 分布调优

Luminous版本开始新增的balancer模块在PG分布优化方面效果非常明显,操作也非常简便,强烈推荐各位在集群上线之前进行这一操作,能够极大的提升整个集群...

3625
来自专栏我和未来有约会

Silverlight第三方控件专题

这里我收集整理了目前网上silverlight第三方控件的专题,若果有所遗漏请告知我一下。 名称 简介 截图 telerik 商 RadC...

4355
来自专栏菩提树下的杨过

Flash/Flex学习笔记(23):运动学原理

先写一个公用的小球类Ball: package{ import flash.display.Sprite; //小球 类 public class B...

27110
来自专栏码匠的流水账

聊聊NettyConnector的start及shutdown

reactor-netty-0.7.6.RELEASE-sources.jar!/reactor/ipc/netty/NettyConnector.java

1021
来自专栏落花落雨不落叶

canvas画简单电路图

81311
来自专栏hbbliyong

WPF Trigger for IsSelected in a DataTemplate for ListBox items

<DataTemplate DataType="{x:Type vm:HeaderSlugViewModel}"> <vw:HeaderSlug...

4214
来自专栏我和未来有约会

Kit 3D 更新

Kit3D is a 3D graphics engine written for Microsoft Silverlight. Kit3D was inita...

2886

扫码关注云+社区