canvas rotate()畫布的旋轉詳解
剛才還是風和日麗的天，這沒一會會就烏雲密佈了，雨呀，眼瞅就下來了呢，一場秋雨一場寒，感覺懂得要穿棉襖了的節奏
10月1號之前，還是T恤呢，10月放完國慶節和中秋節以後就開始毛衣、毛衫、毛外套了，這真的是8天過了一個季節呀~~~
大概北方的秋天都是這麼快的吧
繼續來看看canvas的rotate()方法
rotate()旋轉當前的繪圖。
語法：context.rotate(angle)
引數：angle旋轉角度，以弧度計（n*Math.PI）
舉例：假如想要旋轉60度，可以context.rotate(Math.PI/3)進行表示；
鄉親們注意啦？開會啦？
旋轉的中心是在整個畫布的左上角（0,0），旋轉的正方向是順時針，旋轉的反方向是逆時針，
重點：canvas中的rotate方法是繞畫布左上角（0,0）進行旋轉的，而且會受到translate的影響
例項效果開始：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
canvas{
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas width="800" height="600"></canvas 顯示效果：
逆方向旋轉30度怎麼寫？
<!DOCTYPE html>
<html>
<head lang 顯示效果：
既然知道了旋轉，那我們來做一個好玩的，燥起來，燥起來…..
需求：做一個旋轉的矩形，並且以矩形的中心為原點，圍繞原點旋轉
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
canvas{
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas width="800" height="600"></canvas>
<script>
var canvas=document.querySelector('canvas');
var ctx=canvas.getContext('2d');
//3.把旋轉的矩形平移進畫布
ctx.translate(300,300);
var timer=setInterval(function(){
//4.清除的點需要注意 ctx.clearRect(-151,-101,canvas.width,canvas.height);
//1.定義一個旋轉的方法,確定每次時間間隔中要旋轉多少弧度
ctx.rotate(0.01*Math.PI);
//2.繪製一個矩形，因為需求要求矩形以中心為軸進行旋轉，但是canvas中rotate只能以畫布左上角為軸，進行旋轉
//因此，只要使矩形的中心和畫布的左上角重合就可以了(起點的橫縱座標為矩形寬高的一半)
ctx.strokeRect(-150,-100,300,200);
},5);
</script>
</body>
</html>顯示效果圖：
既然是持續旋轉馬上想到的肯定就是setInterval，每間隔5毫秒執行一次函式
在想到的就是用到canvas中的rotate()方法，讓矩形旋轉一定的角度
接下來遇到難點了，就是rotate旋轉都是以畫布的左上角為原點進行旋轉的，那想讓矩形圍繞矩形的中心點旋轉需要怎麼辦呢？
是不是可以把矩形的原點移到畫布的原點，然後進行旋轉呢？想想的效果如下圖：
那麼這個問題解決了，接下來就是，人家要求矩形是在畫布的內部，怎樣讓影象移到畫布的內部呢？就用到canvas translate()方法進行平移，詳情可點選連結
現在移入到了canvas的內部了，就萬事大吉了？
no no no 可能噩夢才剛剛開始，又出現了個bug，效果如圖：
我去哪裡是噩夢？感覺這個畫面還挺炫的有沒有？
不過它終究不是客戶想要的效果，問題來了，為什麼會發生重複疊加的效果？ok,沒清除canvas中每次旋轉的效果，所以導致圖片的效果累加起來，那就需要用clearRect進行清除，那清除的其實座標在哪裡呢？這可是重點，就是矩形起點的橫縱座標+法線外面的1px虛影，所以clearRect(-151,-101,canvas.width,canvas.height);
大功告成！！！撒花撒花！！
