使用canvas 绘制时钟

最新推荐文章于 2022-05-11 19:24:55 发布
最新推荐文章于 2022-05-11 19:24:55 发布
阅读量405 收藏
点赞数 1
分类专栏： HTML5 文章标签： canvas 时钟 表盘
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jasonjkj/article/details/78008171
版权

三种思路


MDN 的案例作参考

https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Basic_animations


我实现的效果,

1.使用  save   restore  rotate translate

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas width="800" height="600" id="canvas"></canvas>
</body>
<script>
    var canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    ctx.translate(350, 300);

    function setTime() {
        //创建图片对象
        var img = new Image();
        img.src = "back.png";
        ctx.drawImage(img, -350, -300);
        function hour(angle) {
            ctx.save();
            ctx.rotate(Math.PI / 180 * angle);
            //时针
            ctx.beginPath();
            ctx.lineWidth = "10";
            ctx.strokeStyle = "black";
            ctx.moveTo(0, 18);
            ctx.lineTo(0, -200);
            ctx.lineCap = "round";  //秃一点
            ctx.stroke();
            ctx.closePath();
            ctx.restore();
        }

        function minite(angle) {
            ctx.save();
            ctx.rotate(Math.PI / 180 * angle);

            //分针
            ctx.beginPath();
            ctx.lineWidth = "5";
            ctx.strokeStyle = "black";
            ctx.moveTo(0, 22);
            ctx.lineTo(0, -220);
            ctx.stroke();
            ctx.closePath();
            ctx.restore();
        }

        function second(angle) {
            ctx.save();
            ctx.rotate(Math.PI / 180 * angle);

            //秒针
            ctx.beginPath();

            //试试阴影
            ctx.shadowOffsetX = 2;
            ctx.shadowOffsetY = 5;
            ctx.shadowColor = "red";
            ctx.shadowBlur = 10;

            /*ctx.lineJoin="round";  //想设置交点,没作用
             miterLimit=1;*/

            ctx.strokeStyle = "red";
            ctx.moveTo(0, 30);
            ctx.lineTo(0, -240);
            ctx.stroke();
            ctx.closePath();


            //中间设置一个圆吧,留着阴影吧
            ctx.beginPath();
            ctx.arc(0, 0, 7, 0, Math.PI * 2);
            ctx.fillStyle = "red";
            ctx.fill();
            ctx.closePath();
            ctx.restore();
        }

        img.onload = function () {
            //调用函数
            var now = new Date();
            var h;
            (h = now.getHours()) > 12 ? (h = h - 12) : "";
            var s = now.getSeconds();
            var m = now.getMinutes();

            hour(((h * 60 * 60 + m * 60 + s) / (12 * 60 * 60) - 90) * 360);
            console.log((h * 60 * 60 + m * 60 + s) / (12 * 60 * 60) * 360);
            minite((m * 60 + s) / (60 * 60) * 360);
            second(s / 60 * 360);
        };

    }
    var t = setInterval(function () {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        setTime();
    }, 1000);
</script>
</html>
 

 2.使用  Math.sin()    Math.cos() 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <!--translate() 方法为画布的变换矩阵添加水平的和垂直的偏移。参数 dx 和 dy 添加给后续定义路径中的所有点。-->
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas width="800" height="600" id="canvas"></canvas>
</body>
<script>
    var canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    ctx.translate(350, 300);
    //这句话他妈别写在函数里面

    function setTime() {
        //创建图片对象
        var img = new Image();
        img.src = "back.png";
        ctx.drawImage(img, -350, -300);
        //加载图片之后

        function hour(angle) {
            //时针
            ctx.beginPath();
            ctx.lineWidth = "10";
            ctx.strokeStyle = "black";
            ctx.moveTo(0,0);
            ctx.lineTo(200*Math.cos(angle*Math.PI/180),200*Math.sin(angle*Math.PI/180));
            ctx.lineCap = "round";  //秃一点
            ctx.stroke();
            ctx.closePath();
            ctx.restore();
        }

        function minite(angle) {
            console.log(angle+"分的");
            //分针
            ctx.beginPath();
            ctx.lineWidth = "5";
            ctx.strokeStyle = "black";
            ctx.moveTo(0,0);
            ctx.lineTo(220*Math.cos(angle*Math.PI/180),220*Math.sin(angle*Math.PI/180));
            ctx.stroke();
            ctx.closePath();
        }

        function second(angle) {
            //秒针
            ctx.beginPath();
/*
            //试试阴影  但是不知道怎么清除....
            ctx.shadowOffsetX = 2;
             ctx.shadowOffsetY = 5;
             ctx.shadowColor = "red";
             ctx.shadowBlur = 10;

           /!* ctx.lineJoin="round";  //想设置交点,没作用*!/
             miterLimit=1;*/

            ctx.strokeStyle = "red";
            ctx.moveTo(-18 * (Math.cos(angle * (Math.PI / 180))), -18 * (Math.sin(angle * (Math.PI / 180))));
            ctx.lineTo(250*Math.cos(angle*Math.PI/180),250*Math.sin(angle*Math.PI/180));
            ctx.stroke();
            ctx.closePath();


            //中间设置一个圆吧,留着阴影吧
            ctx.beginPath();
            ctx.arc(0, 0, 7, 0, Math.PI * 2);
            ctx.fillStyle = "red";
            ctx.fill();
            ctx.closePath();
        }


        //调用函数
        var now = new Date();
        var h;
        (h = now.getHours()) > 12 ? (h = h - 12) : "";
        var s = now.getSeconds();
        var m = now.getMinutes();
        img.onload=function () {
            console.log((h*60*60+m*60+s)/(12 * 60 * 60)*360);
            hour((h*60*60+m*60+s)/(12 * 60 * 60)*360-90);
            minite((m * 60 + s) / (60 * 60) * 360-90);
            second(s / 60 * 360-90);
        };

    }

   /* setTime();*/

      var t = setInterval(function () {

     ctx.clearRect(0,0,canvas.width,canvas.height);
     setTime();
     }, 1000);
</script>
</html>
 

 

 

3.使用 arc   画扇形   然后弧度为0   
 


 
 


 
 

 

ctx.arc(350,300,200,angle*Math.PI/180,angle*Math.PI/180,false);
 

 

 


 
 

实现代码
 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas width="800" height="600" id="canvas"></canvas>
</body>
<script>
    var canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    function setTime() {
        //创建图片对象
        var img = new Image();
        img.src = "back.png";
        ctx.drawImage(img, 0, 0);
        //加载图片之后

        function hour(angle) {
            //时针
            ctx.beginPath();

            ctx.lineWidth = "8";
            ctx.strokeStyle = "black";
            ctx.moveTo(350,300);
            ctx.arc(350,300,200,angle*Math.PI/180,angle*Math.PI/180,false);
            ctx.closePath();

           /* ctx.lineCap = "round";*/  //秃一点,只能给折线设置
            ctx.stroke();
        }

        function minite(angle) {
            ctx.beginPath();
            ctx.lineWidth = "4";
            ctx.strokeStyle = "black";
            ctx.moveTo(350,300);
            ctx.arc(350,300,230,angle*Math.PI/180,angle*Math.PI/180,false);
            ctx.closePath();
            ctx.stroke();
        }

        function second(angle) {
            ctx.beginPath();

           /* ctx.shadowOffsetX = 2;
            ctx.shadowOffsetY = 5;
            ctx.shadowColor = "red";
            ctx.shadowBlur = 10;*/

            /*ctx.lineJoin="round";  //想设置交点,没作用
             miterLimit=1;*/

            ctx.strokeStyle = "red";
            ctx.lineWidth = "2";
            ctx.moveTo(350,300);
            ctx.arc(350,300,250,angle*Math.PI/180,angle*Math.PI/180,false);
            ctx.closePath();
            ctx.stroke();
        }


        //调用函数
        var now = new Date();
        var h;
        (h = now.getHours()) > 12 ? (h = h - 12) : "";
        var s = now.getSeconds();
        var m = now.getMinutes();
        img.onload=function () {
            console.log((h*60*60+m*60+s)/(12 * 60 * 60)*360);
            hour((h*60*60+m*60+s)/(12 * 60 * 60)*360-90);
            minite((m * 60 + s) / (60 * 60) * 360-90);
            second(s / 60 * 360-90);
        };

    }

    setTime();
     var t = setInterval(function () {
     ctx.clearRect(0,0,canvas.width,canvas.height);
     setTime();
     }, 1000);
</script>
</html>
 

 

 


 
 


 

                

        

        

    

  


    

      

        

            

              
                
                  jasonjkj
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
使用Canvas制作风景时钟

				
			

			

				

					liuyan11223的博客
				

				

					07-06
					
					292
					
				

			

		

		

			
				
Canvas制作风景时钟

			
		

	



                

              
                



	

		

			

				
					
canvas绘制时钟

				
			

			

				

					艾夏SEO
				

				

					12-08
					
					415
					
				

			

		

		

			
				
canvas绘画时钟

			
		

	



                


  
              

                


	

		

			

				
					
用canvas绘制时钟

				
			

			

				

					ancha7106的博客
				

				

					07-21
					
					203
					
				

			

		

		

			
				
用canvas做时钟其实很简单，下面是我做出的效果：

是不是还挺漂亮的？
下面上代码：
html


<div class="whole">
    <canvas id="canvas" width="450" height="450"></canvas>
    <canvas id="canvas1" width="3...

			
		

	





	

		

			

				
					
使用canvas绘制时钟

				
			

			

				

					timeless的博客
				

				

					08-19
					
					1237
					
				

			

		

		

			
				
canvas
    
        * {
            padding: 0;
            margin: 0;
        }

        html, body {
            width: 100%;
            height: 100%;
            background-color: #DDFFF8;
       

			
		

	



		

			
		



	

		

			

				
					
 使用 canvas 做一个时钟

				
			

			

				

					weixin_34013044的博客
				

				

					05-19
					
					71
					
				

			

		

		

			
				
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="c...

			
		

	





	

		

			

				
					
Canvas绘制一个时钟

				
			

			

				

					秃头小桂子
				

				

					05-11
					
					2266
					
				

			

		

		

			
				
Canvas绘制一个时钟

Canvas：一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。
博客地址：https://xiaofly.cn/post-details?id=627b9c9b5fcf765110cdcb6e

先上效果图：

先创建一个index.html，内容如下：
<!-- index.html -->
<!DOCTYPE html>
<h

			
		

	





	

		

			

				
					
微信小程序使用canvas绘制实现时钟

				
			

			

				

					11-01
				

			

		

		

			
				
接下来定义`drawClock`方法，用于在canvas上绘制时钟：  ```javascript drawClock() {  const ctx = this.data.ctx;  const now = new Date();   // 清除画布  ctx.clearRect(0, 0, 300, 300);   // 绘制时钟圆盘  ...

			
		

	





	

		

			

				
					
JavaScript Canvas绘制时钟

					
最新发布

				
			

			

				

					02-22
				

			

		

		

			
				
在这个场景中，我们将深入探讨如何使用JavaScript和Canvas API来创建一个实时更新的时钟。  首先，我们需要在HTML中创建一个`<canvas>`元素，它是JavaScript画布的基础：  ```html <!DOCTYPE html>      <title>...

			
		

	





	

		

			

				
					
使用canvas绘制超炫时钟

				
			

			

				

					09-28
				

			

		

		

			
				
以上就是使用canvas绘制超炫时钟的基本流程。这个过程不仅涉及到HTML5 canvas的绘图技术，还涉及到基本的几何和三角函数知识，如正弦、余弦以及角度与弧度的转换。通过这种方式，我们可以创建出极具视觉吸引力的交互...

			
		

	





	

		

			

				
					
H5的canvas画时钟

				
			

			

				

					10-20
				

			

		

		

			
				
用HTML5的canvas画时钟，怎么使用画布在浏览器上面绘画。画出一个漂亮的时钟。里面用到三角函数以及一些canvas的方法。

			
		

	





	

		

			

				
					
HTML5 Canvas绘制时钟

				
			

			

				

					06-01
				

			

		

		

			
				
这篇博文“HTML5 Canvas绘制时钟”旨在介绍如何利用Canvas API创建一个实时更新的数字或指针式时钟。我们将深入探讨Canvas的基础知识、相关API以及实现时钟的具体步骤。  1. HTML5 Canvas基础  HTML5 Canvas是一个二...

			
		

	





	

		

			

				
					
利用canvas制作一个时钟

				
			

			

				

					weixin_30421525的博客
				

				

					08-01
					
					129
					
				

			

		

		

			
				
先上张效果图。

利用canvas来画出一个时钟，想想都是一件神奇又美妙的事情。话不多说，先上代码吧。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=de...

			
		

	





	

		

			

				
					
使用canvas绘制一个时钟

				
			

			

				

					sifanchao的博客
				

				

					05-26
					
					637
					
				

			

		

		

			
				
准备工作，设置基准
设置表钟的表心位置坐标（x,y）和表钟大小（r）。创建canvas，使用getContext() 方法返回canvas对象。
得到时分秒表针每走一步的度数，用来绘制扇形

初始化起始位置
时针因为一共12格，所以每走一步的度数为 30°
分针一共60格，所以一步为 6°
秒针6°
为了修饰，当秒针走了10秒时，分钟多一度；同理分针走了2分钟时，时针多一度。

绘制一个小刻度的扇形

绘制白色表盘
用白色表盘盖住上一个扇形圆，生成一个带有刻度的新扇形圆

绘制大刻度

绘制小白色表盘

绘

			
		

	





	

		

			

				
					
利用canvas绘制一个简单时钟

				
			

			

				

					奋斗在路上
				

				

					11-18
					
					3824
					
				

			

		

		

			
				
首先在主页面中构建基本框架，其实只有一个时钟也没有什么框架啦





	
	canvas clock
	
	div{
		text-align: center;
		margin-top: 250px;
	}
	#clock{
		border: 1px solid #ccc;
	}
	


	
	
	



---------------------------------------

			
		

	





	

		

			

				
					
1.使用canvas实现一个简单的时钟

				
			

			

				

					Rui_cong的博客
				

				

					11-26
					
					320
					
				

			

		

		

			
				
CSS代码：
   *{padding:0;margin:0;}
        body{
    background:#000000 url('背景.jpg') no-repeat fixed;
            font-family:华文新魏;
            font-size:30px;
        }
        #文章{
            backg

			
		

	





	

		

			

				
					
Canvas绘制时钟

				
			

			

				

					Android丶Ren
				

				

					02-17
					
					389
					
				

			

		

		

			
				
Canvas Clock
        

            div{
                text-align: center;
                margin-top: 250px;
            }
            #clock{

                border: 1px solid #ccc;
            }


			
		

	





	

		

			

				
					
用canvas画一个时钟

				
			

			

				

					eidolons的博客
				

				

					05-14
					
					444
					
				

			

		

		

			
				
用canvas画一个时钟此篇内容假定你已经有了一定的canvas基础了，如果还没有，请参考canvas基础知识点(一)；写在前面：
  Canvas 的状态是以堆(stack)的方式保存的，每一次调用 save() 方法，当前的状态就会被推入堆中保存起来,这些状态包括移动、旋转、缩放等。而对应的restore()方法会将上一个保存的状态从堆栈中弹出，恢复了canvas的初始状态，不会影响后续的绘图。

			
		

	





	

		

			

				
					
使用Canvas绘制精美手表教程

				
			

			

				

					
				

			

		

		

			
				
可以使用 `requestAnimationFrame()` 创建平滑的动画效果，不断地更新指针角度并重新绘制时钟。此外，可能还需要处理时区、AM/PM等细节，以提供准确的时间显示。  通过以上这些知识点，结合适当的CSS和JavaScript...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值