【效果】使用canvas rotate實現一個旋轉的矩形

使用canvas rotate實現一個旋轉的矩形，並且以矩形的中心為原點，圍繞原點旋轉：

<canvas id="canvas" width="800" height="400"></canvas>
        <script type="text/javascript">
            var canvas = document.getElementById('canvas');
            var ctx = canvas.getContext('2d');
            ctx.translate(400,200);
            setInterval(function(){
                ctx.clearRect(-154,-104,canvas.width,canvas.height); // 清空矩形以及矩形的邊框產生的效果
                ctx.beginPath();
                ctx.lineWidth = "4";
                ctx.strokeStyle = '#cccccc';
                ctx.rotate(0.01 * Math.PI); // 旋轉方法
                ctx.rect(-150,-100,300,200); // 畫300*200的矩形，並把矩形的中心點跟畫布原點重合
                ctx.stroke();
            },5);
        </script>

當然也可以使用strokeRect來實現，代碼如下：

<canvas id="canvas" width="800" height="400"></canvas>
        <script type="text/javascript">
            var canvas = document.getElementById('canvas');
            var ctx = canvas.getContext('2d');
            ctx.translate(400,200);
            setInterval(function(){
                ctx.clearRect(-154,-104,canvas.width,canvas.height); // 清空矩形以及矩形的邊框產生的效果
                ctx.lineWidth = "4";
                ctx.strokeStyle = '#cccccc';
                ctx.rotate(0.01 * Math.PI); // 旋轉方法
                ctx.strokeRect(-150,-100,300,200); // 畫300*200的矩形，並把矩形的中心點跟畫布原點重合
            },5);
        </script>

從以上代碼可以看出，canvas的rect()和strokeRect()達到的效果是一樣的，只是：rect()只是創建矩形，但是沒有在畫布上繪畫，需要通過stroke()和fill()方法在畫布上實際的繪畫；而strokeRect()方法實際上會在畫布上繪制矩形，該方法繪制矩形默認的筆觸顏色為黑色，可以通過strokeStyle來修改填充顏色。

參考地址：

• 《canvas rotate()畫布的旋轉詳解》
• 《Canvas-圖片旋轉》