Html5 Canvas初探學習筆記(13) -圖片變換
之前的圖形變換中的那些操作的狀態值，在圖片操作裡依然有用，雖然像縮放這樣的操作我們在繪製的時候就可以實現，不過這依然是一種實現的方法
1.圖片的平移，效果如下：
程式碼如下：
var image = new Image();
image.src = "grossini.png";
image.onload = function(){
context.drawImage(image,50,50);
context.translate(100,100);
context.drawImage(image,50,50);
}
和圖形操作一樣，在平移之後，我們給的座標值都會發生相應的偏移，同樣的也可以使用矩陣方法來實現。程式碼如下：
var image = new Image();
image.src = "grossini.png";
image.onload = function(){
context.drawImage(image,50,50);
context.transform(1,0,0,1,100,100);
//context.transform(0,1,1,0,100,100);
context.drawImage(image,50,50);
}
同樣的，注掉的那句transform和沒有注掉的transform效果是一樣的，從整體上前四個引數負責縮放和旋轉，後兩個引數是平移，前四個引數1，4為一組控制縮放，2，3
2.縮放圖片
效果如下：
程式碼如下：
image.onload = function(){
context.drawImage(image,50,50);
context.translate(150,50);
context.scale(0.5,0.5);
context.drawImage(image,0,0);
}
同樣的，需要配合平移和縮放，因為縮放之後，你的座標位置也會作相應的縮放。也可以使用矩陣方法來實現相應的操作。
image.onload = function(){
context.drawImage(image,50,50);
context.transform(0.5,0,0,0.5,150,50);
context.drawImage(image,0,0);
}
就是1和4兩個引數縮放0.5.
3.旋轉
逆時針旋轉，效果如下：
程式碼如下：
context.drawImage(image,50,50);
context.transform(-Math.sin(Math.PI/4),Math.cos(Math.PI/4),Math.cos(Math.PI/4),Math.sin(Math.PI/4),150,50);
context.drawImage(image,0,0);
兩組引數分別為負的sin旋轉角，cos旋轉角，cos旋轉角，sin旋轉角。
順時針旋轉，效果如下：
程式碼如下;
context.drawImage(image,50,50); context.transform(Math.cos(Math.PI/4),Math.sin(Math.PI/4),-Math.sin(Math.PI/4),Math.cos(Math.PI/4),150,50);
context.drawImage(image,0,0);
兩組引數分別為cos旋轉角，sin旋轉角，負的sin旋轉角，cos旋轉角。
如有錯誤，希望大家多多指正
下一篇繼續研究canvas中的畫素操作