canvas旋轉畫筆,能夠使用rotate方法,rotate方法是繞着中心點旋轉的,中心點默認是左上角的(0,0)位置,能夠使用translate方法改變旋轉的中心點,下面介紹兩種方法旋轉,能夠根據本身的需求使用,關鍵是理解旋轉的原理html
此種方法是,先將中心點平移到矩形中心,接着旋轉,再將中心點平移回原點(0, 0),按照以前的位置和大小繪製即爲繞中心旋轉後的圖形,此種方法,在還原以前,繪製的東西都會繞着調用rotate的位置旋轉canvas
<html> <head> <meta charset="utf-8" /> <title>canvas繞中心旋轉</title> <style> canvas { border: 1px solid #ddd; } </style> </head> <body> <canvas id="canvas" width="600" height="800"></canvas> <script> let canvas = document.getElementById('canvas'); let ctx = canvas.getContext('2d'); let width = canvas.width; let height = canvas.height; // 矩形的參數 const x = 100; const y = 100; const rectWidth = 400; const rectHeight = 200; // 繪製旋轉前的矩形 var grd = ctx.createLinearGradient(100, 100, 500, 100); grd.addColorStop(0, "red"); grd.addColorStop(1, "blue"); ctx.fillStyle = grd; ctx.fillRect(x, y, rectWidth, rectHeight); // 計算出矩形中心點的位置 let tx = x + rectWidth / 2; let ty = y + rectHeight / 2; // 先平移到中心點 ctx.translate(tx, ty); // 旋轉90度 ctx.rotate(Math.PI / 2); // // 漸變的位置也要改 // var grd = ctx.createLinearGradient(-rectWidth / 2, -rectHeight / 2, rectWidth / 2, rectHeight / 2); // grd.addColorStop(0, "red"); // grd.addColorStop(1, "blue"); // ctx.fillStyle = grd; // // 繪製旋轉後的矩形,要注意,此時中心點爲矩形中心,因此左上角座標要從新計算,不是以前的x和y // ctx.fillRect(-rectWidth / 2, -rectHeight / 2, rectWidth, rectHeight); // // 從新旋轉 // ctx.rotate(-Math.PI / 2); // 再平移回原點 ctx.translate(-tx, -ty); // 繪製旋轉後的圖形 ctx.fillRect(x, y, rectWidth, rectHeight); // 從新還原旋轉的角度,避免下次繪製出現問題 ctx.translate(tx, ty); ctx.rotate(-Math.PI / 2); ctx.translate(-tx, -ty); </script> </body> </html>
此種方法是,先將中心點平移到矩形中心,接着旋轉,繪製,再還原回原來的狀態,此種方法是在繪製好以後再還原,可是繪製的位置和距離等都須要從新計算code
<html> <head> <meta charset="utf-8" /> <title>canvas繞中心旋轉</title> <style> canvas { border: 1px solid #ddd; } </style> </head> <body> <canvas id="canvas" width="600" height="800"></canvas> <script> let canvas = document.getElementById('canvas'); let ctx = canvas.getContext('2d'); let width = canvas.width; let height = canvas.height; // 矩形的參數 const x = 100; const y = 100; const rectWidth = 400; const rectHeight = 200; // 繪製旋轉前的矩形 var grd = ctx.createLinearGradient(100, 100, 500, 100); grd.addColorStop(0, "red"); grd.addColorStop(1, "blue"); ctx.fillStyle = grd; ctx.fillRect(x, y, rectWidth, rectHeight); // 計算出矩形中心點的位置 let tx = x + rectWidth / 2; let ty = y + rectHeight / 2; // 先平移到中心點 ctx.translate(tx, ty); // 旋轉90度 ctx.rotate(Math.PI / 2); // 漸變的位置要改 var grd = ctx.createLinearGradient(-rectWidth / 2, -rectHeight / 2, rectWidth / 2, rectHeight / 2); grd.addColorStop(0, "red"); grd.addColorStop(1, "blue"); ctx.fillStyle = grd; // 繪製旋轉後的矩形,要注意,此時中心點爲矩形中心,因此左上角座標要從新計算,不是以前的x和y ctx.fillRect(-rectWidth / 2, -rectHeight / 2, rectWidth, rectHeight); // 從新旋轉 ctx.rotate(-Math.PI / 2); // 再平移回原點 ctx.translate(-tx, -ty); </script> </body> </html>