HTML5中的幾種變形

HTML5中的變形，共有以下幾種方法

scale() 縮放
rotate() 旋轉
translate() 平移
transform() 矩陣變形
setTransform() 重設矩陣

##這幾個方法，對圖片共能完成下面幾種處理

但是，如果要實現下面這種不規則的變形，就不行了

#那咱們一步步，先來看HTML5的這幾個方法。

1，縮放方法如下

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="800" height="280"></canvas>
<script type="text/javascript">
var c=document.getElementById(&#39;myCanvas&#39;);
var ctx=c.getContext(&#39;2d&#39;);
var img = new Image();
img.src="face.jpg";
img.onload = function(){
	ctx.drawImage(img,0,0);
	ctx.scale(0.5,0.5);
	ctx.drawImage(img,500,0);
};
</script>
</body>
</html>

登入後複製

效果

#2，旋轉程式碼

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="800" height="400"></canvas>
<script type="text/javascript">
var c=document.getElementById(&#39;myCanvas&#39;);
var ctx=c.getContext(&#39;2d&#39;);
var img = new Image();
img.src="face.jpg";
img.onload = function(){
	ctx.rotate(20*Math.PI/180);
	ctx.drawImage(img,200,0);
};
</script>
</body>
</html>

登入後複製

效果

#3，平移程式碼

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="800" height="400"></canvas>
<script type="text/javascript">
var c=document.getElementById(&#39;myCanvas&#39;);
var ctx=c.getContext(&#39;2d&#39;);
var img = new Image();
img.src="face.jpg";
img.onload = function(){
	ctx.drawImage(img,0,0);
	ctx.translate(100,100);
	ctx.drawImage(img,0,0);
};
</script>
</body>
</html>

登入後複製

效果

4，傾斜程式碼

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="800" height="400"></canvas>
<script type="text/javascript">
var c=document.getElementById(&#39;myCanvas&#39;);
var ctx=c.getContext(&#39;2d&#39;);
var img = new Image();
img.src="face.jpg";
img.onload = function(){
	ctx.setTransform(1.3,0.1,-0.2,1,80,40);
	ctx.drawImage(img,0,0);
};
</script>
</body>
</html>

登入後複製

效果

#不規則變形

前提到，HTML5沒辦法直接實現不規則變形，但是，可以透過一連串組合來實現不規則變形，例如將下面的這個變形做一下分解

分解後變成

那繼續看，它其實可以看做是兩個變形的組合，如下圖

其實就是將多個變形組合到了一起，這樣講幾個變形的其中的一部分拿出來，再拼湊成新的圖形，就變成了剛才的特殊圖形了

順著這個思路，我彷照AS3，將一張圖分解成多個小的三角形，效果如下

就這樣，很輕鬆的實現了drawtriangles函數，用來扭曲圖形，它與AS3的drawtriangles函數功能基本一致，區別就是，第4個之後的參數的含義不同，在這裡它第4個參數表示分割線的線粗，第5個參數則表示分割線的顏色，如果不設定，則不顯示分割線，這個函數效果如下，你可以實現任何變形，甚至3D變形也可以