Canvas 繪製一個指定的旋轉圖形(rotate())
阿新 • • 發佈：2019-02-19
demo.html：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> canvas { border:1px solid red; } </style> </head> <body> <canvas id="cvs" width="500" height="500"></canvas> <script> var cvs = document.getElementById('cvs'); var ctx = cvs.getContext('2d'); // 在100，100點繪製一個寬50，高50的矩形（旋轉45度）。 // 這樣會有問題， // 因為旋轉的中心是座標軸的0,0點， // 如果能夠讓旋轉的中心是圖形的中心， // 那麼就可以完成旋轉圖形的繪製。 /* ctx.rotate( Math.PI / 180 * 45 ); ctx.fillRect( 100, 100, 50, 50 );*/ /* * 繪製一個旋轉圖形的步驟： * 1、先平移座標軸到圖形的中心 * 2、旋轉座標軸 * 3、繪製圖形( 需要注意，平移旋轉之後，座標體系變化，不能按照之前定好的座標來繪製旋轉圖形 ) * */ // 正常情況下的參考矩形 ctx.fillStyle = 'pink'; ctx.fillRect( 100, 100, 50, 50 ); // 平移到矩形的中心 ctx.translate( 125, 125 ); // 旋轉座標系 ctx.rotate( Math.PI / 180 * 45 ); // 繪製圖形 ctx.fillStyle = 'blue'; ctx.fillRect( -25, -25, 50, 50 ); //旋轉一般讓圖形中心畫在座標軸原點上。(旋轉會繞著圖形中心旋轉) </script> </body> </html>