CANVAS 伸缩动画

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

//Functions.........................................................

function drawText() {
	context.save();
	context.shadowColor = 'rgba(100,100,150,0.8)';
	context.shadowOffsetX = 5;
	context.shadowOffsetY = 5;
	context.shadowBlur = 10;

	context.fillStyle = 'cornflowerblue';
	context.fillText('HTML5', 20, 250);
	context.strokeStyle = 'yellow';
	context.strokeText('HTML5', 20, 250);
	context.restore();
}

function setClippingRegion(radius) {
	context.beginPath();
	context.arc(canvas.width/2, canvas.height/2,
				radius, 0, Math.PI*2, false);
	context.clip();
}

function fillCanvas(color) {
	context.fillStyle = color;
	context.fillRect(0, 0, canvas.width, canvas.height);
}

function endAnimation(loop) {
	context.fillStyle = color;
	context.fillRect(0, 0, canvas.width, canvas.height);
}

function endAnimation(loop){
	clearInterval(loop);

	setTimeout(function(e) {
		context.clearRect(0, 0, canvas.width, canvas.height);
		drawText();
	},1000);
}

function drawAnimationFrame(radius) {
	setClippingRegion(radius);
	fillCanvas('lightgray');
	drawText();
}

function animate() {
	var radius = canvas.width/2,loop;

	loop = window.setInterval(function() {
		radius -= canvas.width/100;

		fillCanvas('charcoal');

		if(radius > 0) {
			context.save();
			drawAnimationFrame(radius);
			context.restore();
		}
		else {
			endAnimation(loop);
		}
	},16);
};

//Event handlers.........................................................
canvas.onmousedown = function (e) {
	animate();
};

//Initialization.......................................................

context.lineWidth = 0.5;
context.font = '128pt Comic-sans';
drawText();

clip() 方法的用法：
将剪辑区域设置为当前剪辑区域与当前路径的交集。在第一次调用clip()
方法之前，剪辑区域的大小与整个canvas一致。
因为clip()方法会将剪辑区域设置为当前剪辑区域与当前路径的交集，所
以这么对该方法的调用一般都是嵌入save()与restore()方法之间的。否
则剪辑区域将会越变越小，这通常不是我们想要的结果