canvas繪圖

獲取canvas的物件

	let canvas = document.getElementById('demo')
	let contxt = canvas.getContext("2d");
	// 設定畫布的大小，或在元素屬性設定
	canvas.width = 300;
	canvas.height = 300;

可以使用現有的圖片進行操作。 建立一個Image物件，

	let image = new Image();

傳入圖片地址，

	image.src = 'test.png';
	// 需要等待圖片載入完成進行操作。
	image.onload=function(){
		// 動態設定canvas畫布的大小，和圖片的大小一致，必須等圖片載入完成設定
		contxt.width = image.width;
		contxt.height = image.height;
		
		//圖片載入完，就可以繪製到canvas中了，
		contxt.drawImage(image,0,0);
	}
 

drawIamge() drwaImage(img,x,y);  以原大小繪製圖片。

	img:圖片源物件
	x:  canvas物件上的起點x座標
	y:canvas物件上的y座標

drawImage(img,x,y,imgW,imgH);  對繪製的圖片進行縮放。

	img:圖片源物件
	x:  canvas物件上的起點x座標
	y:canvas物件上的y座標
	imgW:繪製到canvas物件上的圖片寬度
	imgH:繪製到canvas物件上的圖片高度

drawImage(img,imgX,imgY,imgW,imgH,canvasX,canvasY,canvasW,canvasH);  對繪製的圖片進行裁剪。

	img:圖片源物件
	imgX:  擷取的源圖片上的x座標
	imgY:擷取的源圖片上的y座標
	imgW:擷取的源圖片寬度
	imgH:擷取的源圖片高度
	canvasX:繪製到canvas物件上的x座標
	canvasY:繪製到canvas物件上的y座標
	canvasW:繪製到canvas物件上的寬度
	canvasH:繪製到canvas物件上的高度

save()、restore()  save()儲存當前操作的屬性，可延續到後續操作。減少相同的設定。

儲存到佇列中，存取方式為先入後出 ； 儲存的狀態： 1.當前應用 的變形（移動、縮放、旋轉） 2.strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit,  shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation 3.當前的裁剪路徑

 restore()恢復儲存的設定，用來當前操作的屬性定義。

	ctx.fillRect(0,0,canvas.width,canvas.height);       // 一個預設黑色的矩形
	ctx.save();             //儲存了fillStyle
	
	ctx.fillStyle = '#ff00ff';
	ctx.fillRect(10,10,canvas.width-20,canvas.height-20);
	ctx.save();
	
	ctx.fillStyle="#ffff00";
	ctx.fillRect(20,20,canvas.width-40,canvas.height-40);
	
	ctx.restore();      //fillStyle 為#ff00ff
	ctx.fillRect(30,30canvas.width-60,canvas.height-60);
	
	ctx.restore();      //fillStyle 為#ffffff
	ctx.fillRect(50,50canvas.width-100,canvas.height-100);

圖片畫素級操作  可以建立新的ImageData或者獲取當前的canvas物件，以一位陣列儲存RGBA格式的整型陣列。

	// 新建，所有畫素預設透明黑
	var imageData= ctx.createImageData(w,h);
	// 獲取當前的canvas畫素資料
	var imageData= ctx.getImageData(left,top,w,h);
	var pixel = imageData.data;
	// 進行畫素級操作
	引數說明：
		left ：左上角x值，
		top:左上角y值，
		w:寬度
		h:高度
	ctx.putImageData(imageData,0,0);
	引數說明：
		圖片物件，
		canvas物件上的左上角x值，
		canvas物件上的左上角y值

畫素說明：

	// 第i個畫素
	pile[4*i+0]     - r
	pile[4*i+1]     - g
	pile[4*i+2]     - b
	pile[4*i+3]     - a
	//座標點（x,y） ,這個座標點時按照canvas左上角（0,0）開始
	let i = y*canvas.width+x;

rgba中a簡單的用作透明度，值範圍0-1。在圖片中的範圍0-255.