[HTML5]利用canvas裁剪圖片成不規則形狀

Posted on 由
LINEで送る
[`evernote` not found]

這是「繚乱三国演義」中物語進行時的動畫。依照不同的故事情節，會出現不同的武將來陪伴玩家進行物語。
為了減少設計部門輸出的時間，在加上它並不是規則的正方形，在ios版本時我採用的是css的「-webkit-mask-box-image」方式把它遮成六角形的樣子。

但是在即將上線的android版本中，css的遮照會因為套用css動畫而失效。所以就必須考慮其他的方式。本來我是想在動畫結束後再重新套用一次css遮罩或是直接就用setinterval不斷的套用。可惜騙不過所有的android瀏覽器。最後只好想辦法用canvas來重新繪圖。

依照下面的方式，不要說是六角形，任何不規則的形狀都可以達成。而且也不再有套用css動畫的限制。
javascript部分：

	var canvas = document.getElementById("myCanvas");
	var ctx = canvas.getContext("2d");
	var imageObj = new Image();
	imageObj.onload = function() {
		ctx.save();
		ctx.beginPath();
		ctx.moveTo(82, 0);
		ctx.lineTo(137, 0);
		ctx.lineTo(174, 37);
		ctx.lineTo(174, 89);
		ctx.lineTo(137, 125);
		ctx.lineTo(82, 125);
		ctx.lineTo(44, 89);
		ctx.lineTo(44, 37);
		ctx.lineTo(82, 0);
		ctx.closePath();
		ctx.clip();
		ctx.drawImage(imageObj, 0, 0,230,130);
		ctx.restore();
	};
	imageObj.src = "nabi.jpg";

html部分：

<div id="nabi">
	<canvas id="myCanvas" style="width:135px;height:80px;"></canvas>
</div>

原圖是一張230×130的大圖，為了要鑲在六角形的框框中，還是需要一點css的配合。
整個部分最麻煩的就是要計算裁切時的座標點，其餘的部份就簡單易懂的多了。

2 則迴響於《[HTML5]利用canvas裁剪圖片成不規則形狀》

回應已關閉。