html5之Canvas坐标变换应用-时钟实例

最新推荐文章于 2024-11-08 16:09:18 发布
最新推荐文章于 2024-11-08 16:09:18 发布
阅读量76 收藏 1
点赞数
文章标签： javascript ViewUI
原文链接：https://yq.aliyun.com/articles/423246
版权

在上一篇中我们了解html5的Canvas ，在这一篇中不用多说，写一个html5的时钟应用程序试手。在这里主要设置了坐标变换的平移（translate）和旋转变换（ratate），以及html5 Canvas的路径绘图，beginPath，closePath，rect，arc等，还有就是html5 Canvas路径绘图重要的绘图状态的保存和恢复机制，save，restore。

   多的也不说了，直接上代码，有不解的欢迎提问，以及对我的建议指教都可以，X@8}U9MLE}EBUE273)]9PGF。

ff下效果图：

代码：

 
 
  1. View Code   
  2.  
  3. <html>   
  4. <head>   
  5. </head>   
  6. <body>   
  7.      <canvas id="myCanvas" width="600" height="300">你的浏览器还不支持哦</canvas>    
  8.  
  9.      <script type="text/javascript">    
  10.          var c = document.getElementById("myCanvas");    
  11.          var cxt = c.getContext("2d");    
  12.         var slen = 60;   
  13.         var mlen = 50;   
  14.         var hlen = 40;   
  15.         cxt.strokeRect(0, 0, c.width, c.height);   
  16.         cxt.beginPath();   
  17.          cxt.strokeStyle = "#00f";    
  18.          cxt.fillStyle = "#00f";    
  19.          cxt.arc(200, 150, 5, 0, 2 * Math.PI, true);    
  20.         cxt.fill();   
  21.         cxt.closePath();   
  22.  
  23.         cxt.beginPath();   
  24.          cxt.strokeStyle = "#00f";    
  25.          cxt.arc(200, 150, 100, 0, 2 * Math.PI, true);    
  26.         cxt.stroke();   
  27.         cxt.closePath();   
  28.         cxt.beginPath();   
  29.         cxt.translate(200, 150); //平移原点；   
  30.         cxt.rotate(-Math.PI / 2);   
  31.         cxt.save();          
  32.          for (var i = 0; i < 60; i++) {    
  33.             if (i % 5 == 0) {   
  34.                  //                cxt.fillStyle = "#ff0000";    
  35.                 cxt.fillRect(80, 0, 20, 5);   
  36.                  cxt.fillText("" + (i / 5 == 0 ? 12 : i / 5), 70, 0);    
  37.              } else {    
  38.                 // cxt.strokeStyle = "#00f";    
  39.                 cxt.fillRect(90, 0, 10, 2);   
  40.             }   
  41.              //document.getElementById("div1").innerText += " " + i;    
  42.             cxt.rotate(Math.PI / 30);   
  43.         }   
  44.         cxt.closePath();   
  45.  
  46.         var ls = 0, lm = 0, lh = 0;   
  47.  function Refresh() {    
  48.     cxt.restore();   
  49.     cxt.save();   
  50.     cxt.rotate(ls * Math.PI / 30);   
  51.     cxt.clearRect(5, -1, slen+1, 2+2);   
  52.     cxt.restore(); cxt.save();   
  53.  
  54.     cxt.rotate(lm * Math.PI / 30);   
  55.     cxt.clearRect(5, -1, mlen+1, 3+2);   
  56.     cxt.restore(); cxt.save();   
  57.  
  58.     cxt.rotate(lh * Math.PI / 6);   
  59.     cxt.clearRect(5, -3, hlen+1, 4+2);   
  60.  
  61.      var time = new Date();    
  62.              var s = ls=time.getSeconds();    
  63.              var m = lm=time.getMinutes();    
  64.              var h = lh=time.getHours();               
  65.             cxt.restore();   
  66.             cxt.save();   
  67.             cxt.rotate(s * Math.PI / 30);   
  68.             cxt.fillRect(5, 0, slen, 2);   
  69.             cxt.restore(); cxt.save();   
  70.             cxt.rotate(m * Math.PI / 30);   
  71.             cxt.fillRect(5, 0, mlen, 3);   
  72.             cxt.restore(); cxt.save();   
  73.             cxt.rotate(h * Math.PI / 6);   
  74.             cxt.fillRect(5, -2, hlen, 4);   
  75.         }   
  76.          var MyInterval = setInterval("Refresh();", 1000);    
  77.     </script>   
  78.  <div id="div1" style=" background:#00f;"></div>    
  79. </body>   
  80. </html>  
  81. 复制代码 
 
 

   我的html5系列 
 
 
 
  1. html5声频audio和视频video
  2. html5-Canvas绘图
  3.  html5之Canvas坐标变换应用-时钟实例4.
  4. html5-web本地存储
 
 
 
  
 
 
 
 
 
  
 
 
 
 
 
  
 
 
 
 
 
  
 
 
 
 
 
    
  

     本文转自 破狼 51CTO博客，原文链接：http://blog.51cto.com/whitewolfblog/835238，如需转载请自行联系原作者 
  
 
  
 
   
 
  
 
 
 


                

        

        




    

  


    


                



	

		

			

				
					
html5之Canvas路径绘图、坐标变换应用实例

				
			

			

				

					09-28
				

			

		

		

			
				
本文将深入探讨Canvas的路径绘图、坐标变换及其在时钟应用程序中的应用实例。  首先，Canvas提供了丰富的绘图方法，如`beginPath()`、`closePath()`、`rect()`和`arc()`等。`beginPath()`用于开始一个新的路径，`...

			
		

	



                

            
              



	

		

			

				
					
html5 canvas js(数字时钟)实例代码

				
			

			

				

					10-26
				

			

		

		

			
				
这个实例代码展示了如何使用HTML5 Canvas和JavaScript创建一个数字时钟。下面我们将深入探讨这个实例中的关键知识点。  首先，HTML部分设置了一个`<canvas>`元素，它有一个ID为"clock"，并指定了宽度和高度。如果...

			
		

	



              


  
              

                


	

		

			

				
					
[转]html5之Canvas坐标变换应用-时钟实例

				
			

			

				

					weixin_34168880的博客
				

				

					02-08
					
					90
					
				

			

		

		

			
				
本文转自：http://www.cnblogs.com/whitewolf/archive/2011/03/02/1969398.html
 
在上一篇中我们了解html5的Canvas ，在这一篇中不用多说，写一个html5的时钟应用程序试手。在这里主要设置了坐标变换的平移（translate）和旋转变换（ratate），以及html5 Canvas的路径绘图，beginPath，close...

			
		

	





	

		

			

				
					
html5 canvas获取坐标系,html5之Canvas路径绘图、坐标变换应用实例

				
			

			

				

					weixin_29903043的博客
				

				

					05-30
					
					2304
					
				

			

		

		

			
				
在上一篇中我们了解html5的Canvas ，在这一篇中不用多说，写一个html5的时钟应用程序试手。在这里主要设置了坐标变换的平移(translate)和旋转变换(ratate)，以及html5 Canvas的路径绘图，beginPath，closePath，rect，arc等，还有就是html5 Canvas路径绘图重要的绘图状态的保存和恢复机制，save，restore。多的也不说了，直接上...

			
		

	



		

			
		



	

		

			

				
					
基于Canvas的Html5多时区动态时钟实战

				
			

			

				

					夜郎King的博客
				

				

					07-02
					
					5947
					
				

			

		

		

			
				
本文以Canvas为基础，支持多时区的多时钟的动态Web展示为例实现一种在Html5上的电子钟展示方法。通过本文可以了解Canvas的详细用法，掌握基本的文本绘制、样式控制、属性管理的基本知识。

			
		

	





	

		

			

				
					
html坐标绘制路径,html5之Canvas路径绘图、坐标变换应用实例

				
			

			

				

					weixin_34585343的博客
				

				

					05-30
					
					239
					
				

			

		

		

			
				
在上一篇中我们了解html5的canvas ，在这一篇中不用多说，写一个html5的时钟应用程序试手。在这里主要设置了坐标变换的平移(translate)和旋转变换(ratate)，以及html5 canvas的路径绘图，beginpath，closepath，rect，arc等，还有就是html5 canvas路径绘图重要的绘图状态的保存和恢复机制，save，restore。多的也不说了，直接上...

			
		

	





	

		

			

				
					
html利用坐标生成动态路径,html5之Canvas路径绘图、坐标变换应用实例

				
			

			

				

					weixin_39983350的博客
				

				

					05-31
					
					196
					
				

			

		

		

			
				
在上一篇中我们了解html5的Canvas ，在这一篇中不用多说，写一个html5的时钟应用程序试手。在这里主要设置了坐标变换的平移(translate)和旋转变换(ratate)，以及html5 Canvas的路径绘图，beginPath，closePath，rect，arc等，还有就是html5 Canvas路径绘图重要的绘图状态的保存和恢复机制，save，restore。多的也不说了，直接上...

			
		

	





	

		

			

				
					
html 绘图 php坐标,HTML_html5之Canvas路径绘图、坐标变换应用实例，在上一篇中我们了解html5的Canva - phpStudy...

				
			

			

				

					weixin_42151729的博客
				

				

					06-02
					
					80
					
				

			

		

		

			
				
html5之Canvas路径绘图、坐标变换应用实例在上一篇中我们了解html5的Canvas ，在这一篇中不用多说，写一个html5的时钟应用程序试手。在这里主要设置了坐标变换的平移(translate)和旋转变换(ratate)，以及html5 Canvas的路径绘图，beginPath，closePath，rect，arc等，还有就是html5 Canvas路径绘图重要的绘图状态的保存和恢复机...

			
		

	





	

		

			

				
					
Html5使用Canvas绘制时钟动画效果

				
			

			

				

					setsunadoudou的博客
				

				

					09-19
					
					456
					
				

			

		

		

			
				
HTML5支持canvas了，我们可以直接在页面上绘图了，我看了下canvas和GDI+的接口差不多，所以我们先了解些基本的概念和方式，然后来做一个应用吧。 我们做所有的画之情需要一个画布，html的...

			
		

	





	

		

			

				
					
canvas 应用实例-我的时钟

				
			

			

				

					浅笑嫣然的博客
				

				

					12-12
					
					191
					
				

			

		

		

			
				
时钟绘制
    


    canvas {
        margin: 50px auto;
        display: block;
        border:1px solid #aaa;        
    }


    
       当前浏览器不支持canvas,请更换浏览器后再重试
    


    var dom=docu

			
		

	





	

		

			

				
					
canvas-基础学习--钟表绘制

				
			

			

				

					wei1273356078的博客
				

				

					07-18
					
					266
					
				

			

		

		

			
				
什么是 canvas?

HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.
<canvas> 标签只是图形容器，必须使用脚本来绘制图形。
可以通过多种方法使用 canvas 绘制路径盒、圆、字符以及添加图像。
简单来说就是一块画布，需要自己对<canvas>标签设置宽高<canvas width="200" height="100"></canvas>，之后使用样式定位什么的，最后需要使用 js 来

			
		

	





	

		

			

				
					
使用html5 canvas 画时钟代码实例分享

				
			

			

				

					12-14
				

			

		

		

			
				
在这个实例中，我们将探讨如何使用HTML5 Canvas绘制一个实时更新的时钟。首先，我们需要一个HTML文件，其中包含一个`<canvas>`元素，它是我们在网页上绘制图形的地方。  ```html <!DOCTYPE html> <html>    <canvas ...

			
		

	





	

		

			

				
					
html5 canvas制作15种数字时钟样式代码

				
			

			

				

					11-06
				

			

		

		

			
				
在这个项目中，“html5 canvas制作15种数字时钟样式代码”是利用Canvas API创建了十五种不同设计风格的数字时钟。这些时钟样式丰富多样，可以满足不同的设计需求，为网页添加独特的视觉效果。  1. **Canvas基础知识*...

			
		

	





	

		

			

				
					
vue2面试题5|[2024-11-08]

					
最新发布

				
			

			

				

					m0_49474690的博客
				

				

					11-08
					
					367
					
				

			

		

		

			
				
关于vue2API的面试题

			
		

	





	

		

			

				
					
Echarts 折线图

				
			

			

				

					weixin_44443380的博客
				

				

					11-08
					
					203
					
				

			

		

		

			
				
解决方法：设置emphasis.lineStyle和折线图本身lineStyle相同即可。问题：鼠标悬停在折线图上，折线变粗。3、去掉 hover 折线变粗方法。

			
		

	





	

		

			

				
					
每天10个vue面试题(九)

				
			

			

				

					不熬夜的臭宝的博客
				

				

					11-08
					
					516
					
				

			

		

		

			
				
一天10个vue面试题喽！

			
		

	





	

		

			

				
					
软件测试学习笔记丨Vue常用指令-条件渲染（v-if）

				
			

			

				

					ceshiren_com的博客
				

				

					11-05
					
					626
					
				

			

		

		

			
				
v-show只是简单控制dom元素的display属性。v-if通过操纵dom元素来进行切换显示。

			
		

	





	

		

			

				
					
上门理发系统的搭建

				
			

			

				

					app830的博客
				

				

					11-07
					
					381
					
				

			

		

		

			
				
上门理发系统的搭建涉及多个方面，包括技术架构、功能模块、用户体验以及运营策略等。服务器：部署应用到云服务器（如AWS、阿里云）或本地服务器上，确保系统的稳定性和可扩展性。消息通知：通过短信、邮件或APP推送等方式，向用户发送预约确认、提醒等消息。订单管理：用户可以查看自己的预约订单，包括待付款、已付款、已完成等状态。服务浏览与选择：展示各类理发服务，包括价格、时长、适用人群等信息。在搭建过程中，要确保系统的安全性和稳定性，防止数据泄露和系统崩溃。操作便捷：优化用户操作流程，减少不必要的步骤，提高用户体验。

			
		

	





	

		

			

				
					
vxe-grid ，增加新行，并且定位到新增的行

				
			

			

				

					花花鱼的专栏
				

				

					11-05
					
					233
					
				

			

		

		

			
				
vxe-grid新增空行，并且定位到空行位置。

			
		

	





	

		

			

				
					
HTML5 Canvas 实例：动态数字时钟代码详解

				
			

			

				

					
				

			

		

		

			
				
本篇文章主要介绍了如何使用HTML5 Canvas和JavaScript实现一个数字时钟实例。Canvas是HTML5新增的一项强大功能，它允许在网页上绘制图形和动画，而JavaScript则提供了动态处理这些元素的能力。在这个例子中，作者...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值