最近在做canvas相關的功能，遇到了一些問題，寫這篇文章記錄一下自己對canvas不熟悉的一些知識點
1. canvas旋轉
canvas旋轉畫筆，可以使用rotate方法，rotate方法是繞着中心點旋轉的，中心點默認是左上角的(0,0)位置，可以使用translate方法改變旋轉的中心點，下面介紹兩種方法旋轉，可以根據自己的需求使用，關鍵是理解旋轉的原理
1.旋轉方法1
此種方法是，先將中心點平移到矩形中心，接着旋轉，再將中心點平移回原點(0, 0)，按照之前的位置和大小繪製即爲繞中心旋轉後的圖形，此種方法，在還原之前，繪製的東西都會繞着調用rotate的位置旋轉
<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>2. 旋轉方法2
此種方法是，先將中心點平移到矩形中心，接着旋轉，繪製，再還原回原來的狀態，此種方法是在繪製好之後再還原，但是繪製的位置和距離等都需要重新計算
<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>