一.繪製漸變效果

1. 線性漸變

語法：

		//建立CanvasGradient物件
		var g = context.createLinearGradient(x1,y1,x2,y2);
		//追加漸變顏色
		g.addColorStop(顏色開始的相對位置，顏色);

繪製線性漸變的例項：

	<canvas id="cas" width="300" height="300"></canvas>
	<script type="text/javascript">
		var canvas = document.getElementById("cas");
		var ctx = canvas.getContext("2d");

		var g = ctx.createLinearGradient(0,0,300,0);
		g.addColorStop(0, "rgb(255,0,0)");
		g.addColorStop(0.5, "rgb(0,255,0)");
		g.addColorStop(1, "rgb(0,0,255)");

		ctx.fillStyle = g;
		ctx.fillRect(20,20,260,260);
	</script>
 

效果圖：

2.圓形漸變

語法:

		//建立CanvasGradient物件
		var g = context.createRadialGradient(x1,y1,r1,x2,y2,r2);
		//追加漸變顏色
		g.addColorStop(顏色開始的相對位置，顏色);

例子：

	<canvas id="cas" width="300" height="300"></canvas>
	<script type="text/javascript">
		var canvas = document.getElementById("cas");
		var ctx = canvas.getContext("2d");

		var g = ctx.createRadialGradient(150,150,50,150,150,100);
		g.addColorStop(0, "rgb(255,0,0)");
		g.addColorStop(0.5, "rgb(0,255,0)");
		g.addColorStop(1, "rgb(0,0,255)");

		ctx.fillStyle = g;
		ctx.fillRect(20,20,260,260);
	</script>
 

效果圖：

3.Context的屬性

二.繪製圖像

1.影象繪製的基本步驟如下：

1. 讀取影象檔案
2. 在canvas中進行繪製

		var image = new Image();
		image.src = "影象檔案路徑";	
		image.onload = function(){/* 影象讀取時的處理 */};

有三種drawImage()方法用於影象的繪製：

1. 直接繪製

context.drawImage(image,dx,dy);

     2.尺寸修改（resize）

context.drawImage(image,dx,dy,dw,dh);

    3.影象擷取

context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);

2.畫素處理的API：

簡單的說，使用getImageData()方法取出Canvas上影象的畫素資料，通過javascript加工過這些畫素資料後，使用putImageData方法，重新繪製到Canvas中。