canvas绘图API实例讲解（代码实例）

canvas绘图API：

arc()

beginPath()

clearRect()

fill()

fillText()

lineTo()

moveTo()

stroke()

canvas创建不可见的路径，然后用stroke（）来描绘路径的边缘，或者调用fill（）来对路径的内部进行填充，是路径变得可见。可以调用beginPath（）方法来开始定义某一段路径。

类似的还有drawCenter（）方法，通过调用beginPath（）、arc（）、fill（）来绘制时钟中心的那个实心圆。

drawNumerals（）方法是通过调用fillText（）来绘画钟面周围的数字，fillText（）使用来在canvas中进行文本填充的。

drawHand（）是钟表指针的绘制，用了三种绘画线段方法：moveTo（）、lineTo（）、stroke（）。先调用moveTo（）将画笔移动到canvas中的指定地点，然后调用lineTo（）方法，在该点与另外一个指定的点之间绘制一条不可见的路径，最后用stroke（）进行绘画出来。

应用程序通过调用setInterval（）方法来制作时钟的动画效果，该方法每秒钟都会调用一次drawClock（）函数，然后使用clearRect（）方法进行擦除canvas，再重新绘制时钟。

绘制钟表：

drawCircle（）：绘制了一个表示钟面的圆形，方法先调用了beginPath（）来开始定义路径，然后调用arc（）来创建一个圆形的路径。

JavaScript代码：

var canvas = document.getElementById('canvas');
	context = canvas.getContext('2d');

	FONT_HEIGHT = 15;
	MARGIN = 35;
	HAND_TRUNCATION = canvas.width/25;
	HOUR_HAND_TRUNCATION = canvas.width/10;
	NUMERAL_SPACING = 20;
	RADIUS = canvas.width/2 - MARGIN;
	HAND_RADIUS = RADIUS + NUMERAL_SPACING;
//画外圆
function drawCircle(){
	context.beginPath();
	context.arc(canvas.width/2,canvas.height/2,RADIUS,0,Math.PI*2,true);
	context.stroke();
}

function drawNumerals(){
	var numerals = [1,2,3,4,5,6,7,8,9,10,11,12];
		angle = 0;
		numeralWidth = 0;

	numerals.forEach(function(numeral){
		angle = Math.PI/6*(numeral-3);
		numeralWidth = context.measureText(numeral).width;
		context.fillText(numeral,canvas.width/2+Math.cos(angle)*(HAND_RADIUS)-numeralWidth/2,canvas.height/2+Math.sin(angle)*(HAND_RADIUS)+FONT_HEIGHT/3);
	});
}

function drawCenter(){
	context.beginPath();
	context.arc(canvas.width/2,canvas.height/2,5,0,Math.PI*2,true);
	context.fill();
}

function drawHand(loc,isHour){
	var angle = (Math.PI*2)*(loc/60)-Math.PI/2;
		handRadius = isHour?RADIUS - HAND_TRUNCATION - HOUR_HAND_TRUNCATION : RADIUS - HAND_TRUNCATION;
		context.moveTo(canvas.width/2,canvas.height/2);
		context.lineTo(canvas.width/2+Math.cos(angle)*handRadius,canvas.height/2+Math.sin(angle)*handRadius);
		context.stroke(); 
}

function drawHands(){
	var date = new Date,
		hour = date.getHours();

	hour = hour > 12 ? hour - 12 : hour;

	drawHand(hour*5+(date.getMinutes()/60)*5,true,0.5);
	drawHand(date.getMinutes(),false,0.5);
	drawHand(date.getSeconds(),false,0.2);
}

function drawClock(){
	context.clearRect(0,0,canvas.width,canvas.height);

	drawCircle();
	drawCenter();
	drawHands();
	drawNumerals();
}

context.font = FONT_HEIGHT + 'px Arial';
loop = setInterval(drawClock,1000);

html的代码就只要画一个桌布canvas就好了