使用canvas畫不規則圖形
matrix，translate旋轉，scale縮放，和拉伸。貌似具備了這幾個條件我們的問題就可以得到解決了，但是前面我們說過，我們要求的是用不規則圖形的斜切介面，transform固然好用，細細琢磨其實它只能滿足一般的需求，就是對圖形進行縮放和旋轉固然是沒什麼問題，但是要圖形做成不規則斜切這就是個麻煩的事情了，但是對於一般的只需做成平行四邊形或者更簡單的圖形還是推薦使用transform的。所以綜合考慮，還是選擇使用canvas來解決我們的問題需求。話不多說了進入正題。
canvas的強大對於使用過的人來說毋庸置疑，不僅可以實現各種動畫和製作遊戲，它的誕生對於開發人員來說簡直就是驚喜。這裡我只簡單的介紹通過它來實現不規則圖形或者斜切風格。
貼出程式碼
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<strong>這是原圖</strong>
<p>
<img src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg"
width="256" height="191">
</p>
<div>
<strong>這是Canvas斜切實現</strong>
</div>
<!-- 註明當不支援canvas的瀏覽器 -->
<canvas id="canvas" width="256" height="191">您的瀏覽器不支援canvas標籤。</canvas>
</body>
<script type="text/javascript">
//初始化一個Image物件
var canvasImage=new Image();
//賦值圖片地址
canvasImage.src = "
//獲取Canvas物件(畫布)
var canvas = document.getElementById("canvas");
//簡單地檢測當前瀏覽器是否支援Canvas物件，以免在一些不支援html5的瀏覽器中提示語法錯誤
if(canvas.getContext){
//獲取對應的CanvasRenderingContext2D物件(畫筆)
var ctx = canvas.getContext("2d");
var drawimage = function(canvasImage) {
//儲存畫布當前狀態
ctx.save();
//開始一個新的繪製路徑
ctx.beginPath();
//設定線條顏色為藍色
ctx.strokeStyle = "red";
//設定路徑起點座標
ctx.moveTo(0, 0);
ctx.lineTo(0, 180);
ctx.lineTo(230, 191);
ctx.lineTo(256, 100);
//先關閉繪製路徑。注意，此時將會使用直線連線當前端點和起始端點。
ctx.closePath();
ctx.clip();
ctx.drawImage(canvasImage, 0, 0,256,191);
ctx.restore();
};
//必須圖片載入完後在進行繪圖
canvasImage.onload = function() {
drawimage(this);
};
}
</script>
</html>
這樣就輕鬆實現了斜切風格了 ，ok問題解決。需求實現。