Canvas 詳細教程(二)

Canvas 詳細教程(二)

1：使用圖片

drawImage(img,x,y)

• img：圖片源地址
• x,y：圖片的 x,y 位置

請確保圖片裝載完再執行 drawImage，否則什麼都不會發生。

	function draw(){
		var canvas = document.getElementById('canvas');
		if (canvas.getContext){
			var ctx = canvas.getContext('2d');
			
			var img = new Image();
			img.onload = function(){
			   ctx.drawImage(img,0,0)
			}
			img.src = './ai.png';
						
		} else {
			//不支持
		}
	}
	draw();

您還可以使用base64編碼的圖片和使用視頻幀。

drawImage(image, x, y, width, height)

• img：圖片源地址
• x,y：圖片的 x,y 位置
• width,height：圖片向 Canvas 畫入時縮放的大小

			var img = new Image();
			img.onload = function(){
			   ctx.drawImage(img,0,0,250,250)
			}
			img.src = './ai.png';

drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

• img：圖片源地址
• sx, sy, sWidth, sHeight：切入的位置及大小
• dx, dy, dWidth, dHeight：切片的大小及位置

			var img = new Image();
			img.onload = function(){
			   ctx.drawImage(img, 150, 80, 250, 250, 0, 0, 250, 250)
			}
			img.src = './ai.png';

2：變形

方法	描述
save()	保存畫布的所有狀態
restore()	恢復畫布的上一次狀態（可多次調用）

	function draw(){
		var canvas = document.getElementById('canvas');
		if (canvas.getContext){
			var ctx = canvas.getContext('2d');
			
			  ctx.fillStyle = '#2d8cf0'	
			  ctx.fillRect(0,0,150,150);   
			  ctx.save();                  // 保存默認狀態

			  ctx.fillStyle = '#19be6b'       
			  ctx.fillRect(15,15,120,120); 
			  ctx.save();                  // 保存當前狀態
			  
			  ctx.fillStyle = '#ff9900'      
			  ctx.fillRect(30,30,90,90);   

			  ctx.restore();               // 重新加載之前的顏色狀態
			  ctx.fillRect(45,45,60,60);   // 使用上一次的配置繪製一個矩形

			
		} else {
			//不支持
		}
	}
	draw();

移動：

translate(x, y)

• x：左右偏移量
• y：上下偏移量

	function draw(){
		var canvas = document.getElementById('canvas');
		if (canvas.getContext){
			var ctx = canvas.getContext('2d');
			  
			  ctx.fillStyle = '#ff9900'
			  ctx.translate(30,30);
			  ctx.fillRect(0,0,90,90);   

		} else {
			//不支持
		}
	}
	draw();

旋轉：

rotate(angle)

• angle：旋轉角度（順時針）

	function draw(){
		var canvas = document.getElementById('canvas');
		if (canvas.getContext){
			var ctx = canvas.getContext('2d');
			
			  ctx.translate(175,175);
			  ctx.fillStyle = '#ff9900'
			  ctx.fillRect(0,0,90,90); 
			  ctx.save();
			  ctx.restore();
			  
			  ctx.rotate(Math.PI/4)
			  ctx.fillStyle = "#2d8cf0"
			  ctx.fillRect(0,0,90,90); 

		} else {
			//不支持
		}
	}
	draw();

縮放：

scale(x, y)

• x：水平縮放（默認值1）
• y：垂直縮放（默認值1）

	function draw(){
		var canvas = document.getElementById('canvas');
		if (canvas.getContext){
			var ctx = canvas.getContext('2d');
			
			ctx.strokeRect(30, 30, 50, 50);
			ctx.scale(2, 2);
			ctx.strokeRect(30, 30, 50, 50);

		} else {
			//不支持
		}
	}
	draw();

變形：

transform(a, b, c, d, e, f)

方法	描述
a	水平方向的縮放
b	水平方向的傾斜偏移
c	豎直方向的傾斜偏移
d	豎直方向的縮放
e	水平方向的移動
f	豎直方向的移動

	function draw(){
		var canvas = document.getElementById('canvas');
		if (canvas.getContext){
			var ctx = canvas.getContext('2d');
			
			ctx.strokeRect(130, 130, 50, 50);
			ctx.transform(1, 0.1, -0.1, 1, 0, 0)
			ctx.strokeRect(130, 130, 50, 50);

		} else {
			//不支持
		}
	}
	draw();

3：裁剪

clip()

裁剪區域以外的內容都會被隱藏

	function draw(){
		var canvas = document.getElementById('canvas');
		if (canvas.getContext){
			var ctx = canvas.getContext('2d');
			
			ctx.fillRect(150, 150, 30, 30);
			ctx.clip();
			ctx.fillRect(130, 130, 150, 150);
			
		} else {
			//不支持
		}
	}
	draw();

4：動畫

設定定期執行一個指定函數

方法	描述
setInterval(function, delay)	當設定好間隔時間後，function會定期執行。
setTimeout(function, delay)	當設定好間隔時間後，function會定期執行。（使用鍵盤或者鼠標事件配合）
requestAnimationFrame(callback)	告訴瀏覽器你希望執行一個動畫，並在重繪之前，請求瀏覽器執行一個特定的函數來更新動畫。
cancelAnimationFrame(vab)	關閉某動畫

	var aa = 50;
	var img = new Image();
	img.src = './hello.png';
	function draw(){
		var canvas = document.getElementById('canvas');
		if (canvas.getContext){
			var ctx = canvas.getContext('2d');
			
			ctx.globalCompositeOperation = 'destination-over';
			ctx.clearRect(0,0,500,500); // clear canvas
			ctx.save();
			
			ctx.beginPath();
			ctx.drawImage(img,aa,50,50,50)
			ctx.stroke();
			aa+=1;
			window.requestAnimationFrame(draw);
			
		} else {
			//不支持
		}
	}
	window.requestAnimationFrame(draw);

canvas.addEventListener('mouseover', function(e){});

• mouseover：檢測鼠標進入
• mouseout：檢測鼠標離開
• mousemove：檢測鼠標移動

	var aa = 50;
	var img = new Image();
	img.src = './hello.png';
	var canvas = document.getElementById('canvas');
	var ctx = canvas.getContext('2d');
	var move;
	
	function draw(){
		if (canvas.getContext){
			
			ctx.globalCompositeOperation = 'destination-over';
			ctx.clearRect(0,0,500,500); // clear canvas
			ctx.save();
			
			ctx.beginPath();
			ctx.drawImage(img,aa,50,50,50)
			ctx.stroke();
			aa+=1;
			move = window.requestAnimationFrame(draw);
			
		} else {
			//不支持
		}
	}
	
	canvas.addEventListener("mouseover",function(e){
		move = window.requestAnimationFrame(draw);
	});
	
	canvas.addEventListener('mouseout', function(e){
	  window.cancelAnimationFrame(move);
	});