技術標籤：canvascanvas

canvas提供了三個API，分別是：

1.繪製一個填充的矩形
fillRect(x, y, width, height)
2.繪製一個矩形的邊框
strokeRect(x, y, width, height)
3.清除指定矩形區域，讓清除部分完全透明
clearRect(x, y, width, height)

其中x、y是相對於畫布左上角0,0 的距離，width是寬度，height設定矩形高度；

例項1

		
	window.onload=function(){
		var canvas = document.getElementById('canvas');
		canvas.width='300';
		canvas.height='300';
		var ctx = canvas.getContext('2d');
		
		//在x軸為10，y軸為10的位置畫長為120，寬為80的長方形
		ctx.strokeRect(10,10,120,80);
		
		//在x軸為120，y軸為120的位置畫長為160，寬為100的填充長方形
		ctx.fillRect(120,120,160,100);
	}
 

繪製了兩個長方形一個只有有邊框的，一個只有填充的

例項2

	window.onload=function(){
		var canvas = document.getElementById('canvas');
		canvas.width='300';
		canvas.height='300';
		var ctx = canvas.getContext('2d');
		

		//在x軸為30，y軸為30的位置畫邊長為120的正方形
		ctx.fillRect(30,30,120,120);
		//在x軸為50，y軸為50的位置清除邊長為80的正方形區域
		ctx.clearRect(50,50,80,80);
	}

可以看到黑色的正方形裡面被清除出來一個邊長為80的正方形區域，clearRect就是這個作用

我們可以嘗試在清除出來的區域裡面再畫一個正方形

	window.onload=function(){
		var canvas = document.getElementById('canvas');
		canvas.width='300';
		canvas.height='300';
		var ctx = canvas.getContext('2d');
		

		//在x軸為30，y軸為30的位置畫邊長為120的正方形
		ctx.fillRect(30,30,120,120);
		//在x軸為50，y軸為50的位置清除邊長為80的正方形區域
		ctx.clearRect(50,50,80,80);
		//在x軸為70，y軸為70的位置畫邊長為40的正方形
		ctx.fillRect(70,70,40,40);
	}
 

看到如下效果