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

- URL: https://justfly.idv.tw/html5%e5%88%a9%e7%94%a8canvas%e8%a3%81%e5%89%aa%e5%9c%96%e7%89%87%e6%88%90%e4%b8%8d%e8%a6%8f%e5%89%87%e5%bd%a2%e7%8b%80/
- 日期: 2012-11-28
- 分類: WEB&RIA
- 標籤: android, canvas, css, html5, 招待id「J」

https://justfly.idv.tw/wp-content/uploads/2012/11/quest.png這是「[繚乱三国演義](http://goo.gl/6AUzJ)」中物語進行時的動畫。依照不同的故事情節，會出現不同的武將來陪伴玩家進行物語。

為了減少設計部門輸出的時間，在加上它並不是規則的正方形，在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部分：

```

```

原圖是一張230×130的大圖，為了要鑲在六角形的框框中，還是需要一點css的配合。

整個部分最麻煩的就是要計算裁切時的座標點，其餘的部份就簡單易懂的多了。