【html5 每日练习】钟表的外观

r囧r小猫 2022-06-13 11:13 168阅读 0赞

<html lang="en-US">
    <style>
    	#myCanvas{border:3px solid blue;}
    </style>
    <head>
    	<script type="text/javascript">
    		window.onload = function()
    		{
    			var mycanvas = document.getElementById("myCanvas");
    			var context = mycanvas.getContext("2d");
    					
    			context.lineWidth = 2;
    			context.strokeStyle = "blue";
    			context.fillStyle = "blue";
    			context.arc(250,200,5,0,Math.PI*2,true);
    			context.fill();
    
    			context.beginPath();
    			context.arc(250,200,150,0,Math.PI*2,true);
    			context.stroke();
    
    			context.translate(250,200);
    			context.rotate(-Math.PI/2);
    			
    			context.save();
    			for(var i=0;i<60;i++)
    			{
    				if(i % 5 == 0)
    				{
    					context.fillRect(130,0,20,5);		
    					context.fillText((i/5 == 0?12:i/5),120,5);
    				}
    				else
    				{
    					context.fillRect(140,0,10,2)
    				}
    				context.rotate(Math.PI/30);				//360°每6度旋转一次
    			}
    			
    			context.fillRect(0,-2,90,3);
    
    			context.stroke();
    		}
    	</script>
    </head>
    
    <body>
    	<canvas id=myCanvas width=500px height=400px></canvas>
    </body>
    </html>

效果图 ![1334068846_7754.png][]

[1334068846_7754.png]: https://img-my.csdn.net/uploads/201204/10/1334068846_7754.png

发表评论取消回复

表情：

评论列表（有 0 条评论，168人围观）

还没有评论，来说两句吧...

相关阅读

相关【Html5每日练习】本地存储localStorage

上一篇博文中讲到了sessionStorage，今天来练习一下localStorage，其实localStorage很简单，只要将对象改一下就行，看代码 <

落日映苍穹つ/ 2022年06月13日 12:21/ 0 赞/ 282 阅读

相关【Html5每日练习】本地存储之sessionStorage

Html5很强大，不仅添了新的选择器，而且还加了一个Web Storage，以前使用cookies总让我感到不爽，不过在这里我就侮辱它了，好歹也存活了那么多年了，今天就让我们来

系统管理员/ 2022年06月13日 12:21/ 0 赞/ 200 阅读

相关【Html5每日练习】canvas五彩缤纷的五角星

貌似是很久没碰数学的缘故，今天计算如何绘制一个五角星特别地费力，看来还得好好地学下高数啊，太虚假了~~~![大笑][laugh.gif] 不过计算出来后还是有一点小小的错误，

待我称王封你为后i/ 2022年06月13日 12:16/ 0 赞/ 252 阅读

相关【Html5 每日练习】canvas绘制弧形

<html lang="en-US"> <canvas id=myCanvas width=500px height=500px></canvas>

叁歲伎倆/ 2022年06月13日 11:56/ 0 赞/ 288 阅读

相关【Html5每日练习】canvas beginPath()的理解

路径是canvas里很重要的一个概念，刚开始学canvas的人对路径理解不是很深，他们在用canvas的时候会乱用beginPath(),今天做了一个小demo来说明一下路径

谁践踏了优雅/ 2022年06月13日 11:36/ 0 赞/ 256 阅读

相关【Html5每日练习】三角形路径的绘画

每当心情不好的时候想到的第一件事儿就是写代码，每次写代码的时候总可以在较短的时间忘却一些烦恼，不解释，代码如下 <html lang="en-US">

た入场券/ 2022年06月13日 11:29/ 0 赞/ 159 阅读

相关【Html5每日练习】canvas笑脸

在某个论坛游荡的时候，看到一个笑脸图样，就用canvas写了一个，代码如下 <html lang="en-US"> <canvas id=myCan

￡神魔★判官ぃ/ 2022年06月13日 11:29/ 0 赞/ 309 阅读

相关【html5 每日练习】钟表的外观

<html lang="en-US"> <style> myCanvas{border:3px solid blue;} </style>

r囧r小猫/ 2022年06月13日 11:13/ 0 赞/ 169 阅读

相关【html5每日练习】 html5 canvas "米"

上一篇画了一条斜线，估计大家画了线以后都在想着如何去画网上面内些奇妙的动画，你一定会想:内些效果是怎么画出来的呢。但是我在这里告诉一下大家，心急吃不了热豆腐，每个人都是从基础一

悠悠/ 2022年06月13日 10:50/ 0 赞/ 276 阅读

相关【html5每日练习】html5 canvas画线

现在网络最火的是html5，没有之一，虽然正式版还没有出，但咱们可以期待着在未来几年，html5会霸占了互联网，所以毫无疑问得加入到html5的学习之中，谁学得快，谁就有可能把

港控/mmm°/ 2022年06月13日 10:50/ 0 赞/ 282 阅读