HTML5 Canvas 旋转
旋轉
與移動一樣，Context對象能夠調用rotate()方法來按一定的夾角轉動Canvas畫布。rotate()方法的原型如下：
void rotate(radian);
用于將Canvas畫布順時針轉動到與原x軸（橫軸）方向成radian角的位置，radian按弧度制，轉動后x軸方向同時發生改變。同樣，旋轉將不會影響到已經繪制的圖形但是會影響其它由該Canvas生成的Context對象。
下面的旋轉的示例：
?
<!DOCTYPE HTML>?
<html>?
<body>?
<canvas id="canvas" width="600"height="400">?????
???????? <p>Your browserdoes not support the canvas element!</p>?????
</canvas>?????
??????
<script type="text/javascript">?????
??? var canvas =document.getElementById("canvas");?????
??? var context2D =canvas.getContext("2d");??
??? var pic = new Image();??
??? pic.src ="milaoshu.jpg";? //注意目錄結構，這里是把圖片和html放在一個目錄的?
?????
??? //注意下面方法中畫筆狀態的保護，這在很多情況下都會使用到?
??? function draw(){?
??????? context2D.clearRect(0,0,600,400);?
??????? context2D.save();//保存畫筆狀態?
??????? context2D.rotate(Math.PI/10*Math.random());//開始旋轉?
??????? context2D.drawImage(pic,100, 100);?
??????? context2D.restore();//繪制結束以后，恢復畫筆狀態?
??? }?????????
??????
??? setInterval(draw, 1000);?
??????
</script>?????
</body>?
</html>?
<!DOCTYPE HTML>
<html>
<body>
<canvas id="canvas" width="600"height="400">???
???????? <p>Your browserdoes not support the canvas element!</p>???
</canvas>???
????
<script type="text/javascript">???
?var canvas =document.getElementById("canvas");???
?var context2D =canvas.getContext("2d");
?var pic = new Image();
?pic.src ="milaoshu.jpg";? //注意目錄結構，這里是把圖片和html放在一個目錄的
?
?//注意下面方法中畫筆狀態的保護，這在很多情況下都會使用到
?function draw(){
??context2D.clearRect(0,0,600,400);
??context2D.save();//保存畫筆狀態
??context2D.rotate(Math.PI/10*Math.random());//開始旋轉
??context2D.drawImage(pic,100, 100);
??context2D.restore();//繪制結束以后，恢復畫筆狀態
?}??
????
?setInterval(draw, 1000);
?
</script>???
</body>
</html>
效果如圖：
?
補充：
縮放
Context對象可以調用scale()方法來控制Canvas在x軸和y軸方向上的縮放比例。scale()方法的原型如下：
void scale(x, y);
其中x、y分別表示在x軸和y軸上的縮放比例，必須是正數。同translate()與rotate()一樣，scale也是對整個Canvas對象的改變，但是不會影響已經繪制的圖形
總結
以上是生活随笔為你收集整理的HTML5 Canvas 旋转的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 角度制与弧度制
- 下一篇： 块级元素 Vs 内联元素