html5--如何用canvas画一个钟_html手绘时钟代码-优快云博客

本文介绍了一款基于HTML5 Canvas技术实现的动画时钟，通过JavaScript编程完成时钟的绘制与实时更新，并探讨了save()与restore()的正确用法及arc函数的细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先演示下效果吧（除了flash还有什么方法可以演示呢？）

就是这样喵~~丧心病狂的注释代码如下：

<!DOCTYPE HTML>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>动画时钟自制版</title>
<style>
div{
	display:-moz-box;
	display:-webkit-box;
	-moz-box-pack:center;
	-webkit-box-pack:center;
	width:100%
	}
	canvas{
		background-color:white;
		}
</style>
</head>
<body onLoad="start()">
<div>
<canvas width="200px" height="200px" id="canvas"/><!--这里开始的，先把画布拿出来-->
</div>
</body>
</html>
<script type="text/javascript" src="钟表自制版.js"></script>

// JavaScript Documentvar canvas;
var context;//先注册两个全局变量画布酱和画笔酱
function start()
{
	canvas=document.getElementById('canvas');//把话布传进来了
	context=canvas.getContext('2d');//拿到2d的画笔，没有3d的，骚年！
	setInterval("paint()",1);//一看就是定时器的定时器
}
function paint()//从这开始作画了
{
		x=canvas.width/2;
		y=canvas.height/2;//圆心
		r=Math.min(canvas.width/2,canvas.height/2)-25;//考虑到复用是可以方便的该钟的大小，把半径设为了由画布决定的
		context.clearRect(0,0,canvas.width,canvas.height);//清空画布
		
		/*下面开始画表盘*/
		context.save();	
		context.fillStyle="#CCCCCC";
		context.strokeStyle="#666666";
		context.beginPath();
		context.arc(x,y,r,0,2*Math.PI,0);
		context.stroke();
		context.fill();
		context.closePath();
		context.restore();
		r-=10;
		drawtext('1',x+(0.5*r),y-(0.88*r));
	    drawtext('2',x+(0.866*r),y-(0.5*r));
	    drawtext('3',x+r,y);
	    drawtext('4',x+(0.866*r),y+(0.5*r));
	    drawtext('5',x+(0.5*r),y+(0.866*r));
	    drawtext('6',x,y+r);
	    drawtext('7',x-(0.5*r),y+(0.866*r));
	    drawtext('8',x-(0.886*r),y+(0.49*r));
	    drawtext('9',x-r,y);
	    drawtext('10',x-(0.886*r),y-(0.50*r));
	    drawtext('11',x-(0.51*r),y-(0.88*r));
	    drawtext('12',x,35);//参考了别人的数据，怎么也算不精确，好好算算
		/*下面开始获取系统时间*/
		 var date=new Date();
	     var h=date.getHours();
	     var m=date.getMinutes();
	     var s=date.getSeconds();
		 /*下面开始画针*/
		 context.save();
		 context.beginPath();
		 context.lineWisth=4;
		 context.fillStyle="#000000";
	   	context.strokeStyle="#000000";
		 context.arc(x,y,r*0.4,(h/12)*6.22-1.57+(m/60)*0.26,(h/12)*6.22-1.57+(m/60)*0.26,0)
		 context.lineTo(x,y);
		 context.arc(x,y,r*0.6,(m/60)*6.20-1.57,(m/60)*6.22-1.57,0)
		 context.lineTo(x,y);
		 context.arc(x,y,r*0.7,(s/60)*6.27-1.57,(s/60)*6.28-1.57,0)
		 context.lineTo(x,y);
		 context.fill();
		 context.stroke();
		 context.closePath();
		 context.restore();
	
}
function drawtext(text,x,y)//原装的filltext是在坑爹，我们来自己写一个吧
{
	x-=(context.measureText(text).width/2);
	y+=9;
	context.font='bold 16px 宋体';
	context.fillText(text,x,y);
}

最后再说两句
1.save(),restore()
文档中对他们就这样两句话"保存当前环境的状态"和“返回之前保存过的路径状态和属性”，描述的太简单让人感觉这是没什么存在感的东东。而实际上，在绘图中我们可以看到他们的使用频率其实很高，那他们到底什么意思呢？网上大多数人知道的是在改变画布的之前需要先保存画布的状态。

比如用translate(),这个函数可以重新定义画布的初始位置。如果我们只是想一次性使用改动过的坐标的话，我们就可以先用save()把原来画布的状态先保存起来，之后再释放回来，保证坐标是初始坐标。可很多人并没有意识到使用context（画笔）也应该使用。就像如果你只用一只笔画油画的话，你用完一种颜料肯定要先把笔洗一下再蘸下一种颜色，那么在这里也是一样。

2.arc傻傻分不清楚
arc是画弧的函数，在这个例子中我用它画了三个指针，它有6个参数，前两个描述x,y坐标，后一个描述半径，再后面两个描述起始角和终止角，最后一个描述方向是逆时针还是顺时针。关键就是最后一个，很多书都写错了，说0是逆时针，1是顺时针，误导了很多人包括我，研究了才发现恰恰相反，其实很容易理解这个函数是可以省略最后一个参数的。那么js默认值就是0，而一般谁画圆会逆时针画啊？所以正常人编写时候肯定是默认顺时针也就是0是顺时针嘛。还没完，如果光理解到这里的话，肯定还是会有很多地方让我们不解。
请看图。可以发现一个问题，无论是顺时针还是逆时针，都是从右中的位置开始计算的。举个例子(原谅这幅丑画吧，长得丑真不是它的错)，假如说从1.5PI到1.7PI，那么无论是顺时针还是逆时针，位置其实是不变的，变得只是经过的范围。怎么样，是不是跟我们想的有点不一样呢？