用canvas制作钟表

最新推荐文章于 2023-03-30 16:19:17 发布
最新推荐文章于 2023-03-30 16:19:17 发布
阅读量419 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Fbbhahaha/article/details/79746861
版权 
 

<!DOCYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<canvas id="canvas" width="500px" height="500px"></canvas>
		
		<script type="text/javascript">
			//获取canvas对象
			var oCanvas = document.getElementById("canvas");
			//获取上下文（画笔）默认画笔颜色为黑色     fillStyle改变颜色
			var context = oCanvas.getContext("2d");
		(function drawClock () {
			//清空画布
			context.clearRect(0,0,oCanvas.width,oCanvas.height);
		
			//绘制背景
			context.fillStyle="#eee";//实心
			//绘制矩形
			context.fillRect(0, 0, oCanvas.width,oCanvas.height);
 


                        //空心
			//context.strokeStyle = "#eee";
			//绘制矩形
			//context.strokeRect(0, 0, oCanvas.width,oCanvas.height);
			
			//绘制表盘
			context.beginPath();//开始
			context.arc(250, 250, 200, 0, 2 * Math.PI);
			context.strokeStyle="#000";
			context.lineWidth = 4;//设置线的宽度
			context.stroke();//开始画圆
			context.closePath();//关闭
			
			//绘制分刻度
			context.save();//保存当前状态
			context.translate(250,250);//改变坐标轴原点
			for(var i=0; i<60; i++){
				context.beginPath();
				context.rotate(Math.PI/30);//旋转
				context.moveTo(0,-185);//起点
				context.lineTo(0,-195);//终点
				context.lineWidth = 2;
				context.stroke();
				context.closePath();
			}
			context.restore();//将画布恢复到初始状态
			
			
			//绘制时刻度
			context.save();
			context.translate(250,250);//改变坐标轴原点
			for(var i=0; i<12; i++){
				context.beginPath();
				context.rotate(Math.PI/6);//旋转
				context.moveTo(0,-175);
				context.lineTo(0,-195);
				context.lineWidth = 4;
				context.stroke();
				context.closePath();
			}
			context.restore();//将画布恢复到初始状态
			
			//绘制指针
			//获取当前时间
			var now = new Date();
			var sec = now.getSeconds();
			var min = now.getMinutes() + sec / 60;
			var hour = now.getHours() + min / 60;
			
			//绘制时针指针
			context.save();
			context.translate(250,250);
			context.rotate(Math.PI / 6*hour);
			context.beginPath();
			context.moveTo(0,10);
			context.lineTo(0,-150);
			context.lineWidth = 4;
                        context.stroke();
			context.closePath();
			context.restore();
			
			//繪製分針指針
			context.save();
			context.translate(250,250);
			context.rotate(Math.PI / 30*min);
			context.beginPath();
			context.moveTo(0,15);
			context.lineTo(0,-165);
			context.lineWidth = 3;
                        context.stroke();
			context.closePath();
			context.restore();
			
			//绘制秒针指针
			context.save();
			context.translate(250,250);
			context.rotate(Math.PI / 30 * sec);
			context.beginPath();
			context.moveTo(0,25);
			context.lineTo(0,-160);
			context.lineWidth = 2;
			context.strokeStyle="red";
                        context.stroke();
			context.closePath();
			
			//画秒针上的两个小圆
			context.beginPath();
			context.arc(0,0,5,0,2*Math.PI);
			context.fillStyle="white";
			context.strokeStyle="red";
			context.fill();
			context.stroke();
			context.closePath();
			
			context.beginPath();
			context.arc(0,-130,5,0,2*Math.PI);
			context.fillStyle="white";
			context.strokeStyle="red";
			context.fill();
			context.stroke();
			context.closePath();
			
			context.restore();
			
			window.requestAnimationFrame(drawClock);
		})();
			
		</script>
		
	</body>
</html>


 

 


                

        

        

    




    

      

        

            

              
                
                  Fbbhahaha
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    1
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
如何用canvas制作一个简易钟表

				
			

			

				

					CCCXXXW的博客
				

				

					05-11
					
					103
					
				

			

		

		

			
				
用canvas绘制一个简易钟表
最近学习了如何用canvas绘制一个简易钟表，代码如下



    
    
    
    用canvas绘制钟表
    
    

  
    
    
  





			
		

	



                

              
                



	

		

			

				
					
使用Canvas制作的钟表

				
			

			

				

					10-09
				

			

		

		

			
				
Canvas钟表控件，使用方法如下：  <!doctype html>  	 		 		<script type="text/javascript" src="Clock.js"></script> 	 	 		<canvas width='500' height='500' id='clock'></canvas> 	 	 		initClock('clock'); 	 ...

			
		

	



                


  
              

                


	

		

			

				
					
canvas---用canvas制作钟表

				
			

			

				

					maidu_xbd的博客
				

				

					05-14
					
					1141
					
				

			

		

		

			
				
首先，看效果~~~绘制钟表如图



思路：

（1）绘制一个60等分的圆，用一个半径稍小些的白色的圆覆盖画线区域，形成60分钟的刻度。

-

（2）继续在以上基础上，绘制一个12等分的圆，用一个半径稍小些的白色的圆覆盖画线区域，形成12小时的刻度。

注意调整画线的宽度，以明显区分时针的刻度和分针的刻度。



(3)获取本地时间，并绘制时针，分针，秒针弧度。弧度=角度*Math.PI/180...

			
		

	





	

		

			

				
					
canvas制作钟表小案例

				
			

			

				

					不会写代码的前端
				

				

					11-03
					
					309
					
				

			

		

		

			
				

实现原理：canvas绘制圆的知识以及Date对象
window.onload=function (){
            var myCanvas=document.querySelector('#myCanvas');
            var cxt=myCanvas.getContext('2d');
            var timer=null;
         ...

			
		

	



		

			
		



	

		

			

				
					
canvas 绘制钟表

				
			

			

				

					kklkjfdiiu的博客
				

				

					03-30
					
					158
					
				

			

		

		

			
				
时钟示例

			
		

	





	

		

			

				
					
canvas制作简单钟表

				
			

			

				

					diga6688的博客
				

				

					07-13
					
					267
					
				

			

		

		

			
				
之前用html+css+JavaScript实现了一个简单钟表，但还是有一些问题，主要是一些css属性不同浏览器支持效果不一样，所以尝试用 canvas实现了一个简单的钟表，效果在下方，当然了，采用canvas同样会有一些浏览器不支持。。。 这里只讨论canvas的实现方式。^_^

html部分
html部分很简单，写入canvas标签，其id设置为“canvas”，用css设置...

			
		

	





	

		

			

				
					
使用canvas绘制钟表

				
			

			

				

					C431824048的博客
				

				

					11-23
					
					540
					
				

			

		

		

			
				
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>D.

			
		

	





	

		

			

				
					
canvas制作简易钟表

				
			

			

				

					岁月如歌去，十年弹指间
				

				

					08-05
					
					445
					
				

			

		

		

			
				

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
   

			
		

	





	

		

			

				
					
canvas制作钟表

				
			

			

				

					RanQi2016的博客
				

				

					08-12
					
					583
					
				

			

		

		

			
				
之前用html+css+JavaScript实现了一个简单钟表，但还是有一些问题，主要是一些css属性不同浏览器支持效果不一样，所以尝试用 canvas实现了一个简单的钟表，效果在下方，当然了，采用canvas同样会有一些浏览器不支持。。。 这里只讨论canvas的实现方式。^_^


html部分

html部分很简单，写入canvas标签，其id设置为“canvas”，用css设置成

			
		

	





	

		

			

				
					
canvas制作时钟

				
			

			

				

					Xwf1023的博客
				

				

					09-09
					
					161
					
				

			

		

		

			
				
canvas制作时钟

			
		

	





	

		

			

				
					
HTML5 Canvas指针时钟表特效特效代码

				
			

			

				

					04-18
				

			

		

		

			
				
这个“HTML5 Canvas指针时钟表特效特效代码”是一个利用Canvas API实现的交互式时钟示例，它可以为网页添加一个实时更新、直观且美观的时钟组件。  在Canvas中，我们主要通过JavaScript来操作画布，通过`<canvas>`...

			
		

	





	

		

			

				
					
HTML5制作简单的钟表

				
			

			

				

					11-06
				

			

		

		

			
				
在制作钟表的场景下，我们主要会用到`<canvas>`元素，这是一个用于绘制图形的画布，非常适合动态地绘制时钟的指针和数字。  1. **创建HTML5画布**  在HTML文档中，我们需要创建一个`<canvas>`元素，并为其分配一个ID...

			
		

	





	

		

			

				
					
js html5制作简易的时钟表代码

				
			

			

				

					11-08
				

			

		

		

			
				
`<canvas>`元素提供了一个二维绘图表面，允许我们用JavaScript进行图形绘制。在HTML文件中，创建一个`<canvas>`标签，并为其设置ID以便后续JavaScript代码可以引用：  ```html <!DOCTYPE html>      简易时钟表    ...

			
		

	





	

		

			

				
					
用canvas画的会走的钟

				
			

			

				

					08-11
				

			

		

		

			
				
"用canvas画的会走的钟"是一个典型的使用Canvas技术实现的互动性时钟示例，它不仅展示出Canvas的基本绘图功能，还涉及到时间同步和动画更新的知识点。以下是对这个主题的详细说明：  1. **Canvas API基础**：  - `...

			
		

	





	

		

			

				
					
开题报告电影票订票APP的设计与实现 已通过开题答辩的.doc

				
			

			

				

					07-30
				

			

		

		

			
				
近些年的电影在人们文娱活动中占据重要地位，另外，由于人们的生活越来越富有，越来越多的人们不再选择在家里看电影，而是选择去电影院看电影。但是，以往的售票方式是需要工作人员一张张的录入到账户薄中的，这一模式已不再适应现在的实际情况，因为手动的操作不仅繁琐还容易存在差错。随着电子商务的发展，网络购票已经成为一种趋势，电子影票也已经慢慢走入人们的生活。目前，网票网作为国内首家全国性的网上选座购买电影票平台完全实现网上/手机查看影讯、自助选座、网银支付、自助验票全自助化营运模式。

			
		

	





	

		

			

				
					
Magene_C506_1722330141_905661_1722351868.fit

					
最新发布

				
			

			

				

					07-30
				

			

		

		

			
				
Magene_C506_1722330141_905661_1722351868.fit

			
		

	





	

		

			

				
					
麻雀搜索算法SSA-CNN-BiLSTM-Mutilhead-Attention多变量时序预测含源码 5631.zip

				
			

			

				

					07-30
				

			

		

		

			
				
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白；
1、代码压缩包内容
主函数：Main .m；
数据；
调用函数：其他m文件；无需运行 
运行结果效果图；

2、代码运行版本
Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主；

3、运行操作步骤
步骤一：将所有文件放到Matlab的当前文件夹中； 
步骤二：双击打开除Main.m的其他m文件； 
步骤三：点击运行，等程序运行完得到结果；

4、仿真咨询
如需其他服务，可私信博主或扫描博主博客文章底部QQ名片；
4.1 CSDN博客或资源的完整代码提供
4.2 期刊或参考文献复现
4.3 Matlab程序定制
4.4 科研合作
智能优化算法-CNN-BiLSTM-Mutilhead-Attention回归预测系列程序定制或科研合作方向：
4.4.1 遗传算法GA/蚁群算法ACO-CNN-BiLSTM-Mutilhead-Attention回归预测
4.4.2 粒子群算法PSO/蛙跳算法SFLA-CNN-BiLSTM-Mutilhead-Attention回归预测
4.4.3 灰狼算法GWO/狼群算法WPA-CNN-BiLSTM-Mutilhead-Attention回归预测
4.4.4 鲸鱼算法WOA/麻雀算法SSA-CNN-BiLSTM-Mutilhead-Attention回归预测
4.4.5 萤火虫算法FA/差分算法DE-CNN-BiLSTM-Mutilhead-Attention回归预测

			
		

	





	

		

			

				
					
开题报告 二手手机收售系统【答辩高分内容】.doc

				
			

			

				

					07-30
				

			

		

		

			
				
当换手机变成如“女人换衣服”般的容易，你被换下的那款二手手机究竟流向何处，才能释放其最大经济价值？某环保组织曾批露一组数据——每年，中国都会产生230万吨电子垃圾，仅次于美国的300万吨，是世界第二大电子垃圾生产国，并且还以年均20％的速度增加。另外据不完全统计，目前全国仅闲置手机就有10亿多部，并且每年新增3至5亿部。机遇与危机并存 据统计，我国手机用户数量现已达11．46亿。仅去年一年，全国就销售4．25亿部新手机，同时有近4亿部手机被淘汰。在这个手机更新换代比眨眼还快的年代，我国旧手机的回收和无害化处理措施却没能跟上，不少淘汰下来的旧手机都面临“无处可去”的尴尬。

			
		

	





	

		

			

				
					
用python canvas制作一个动态钟表，附上代码

				
			

			

				

					06-06
				

			

		

		

			
				
好的，以下是使用Python的tkinter模块和canvas组件制作动态钟表的代码：  ``` import tkinter as tk import time  class Clock:  def __init__(self, canvas, x, y, radius):  self.canvas = canvas  self.x = x  ...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值