canvas旋转画笔
canvas旋转
canvas旋转画笔，可以使用rotate方法，rotate方法是绕着中心点旋转的，中心点默认是左上角的(0,0)位置，可以使用translate方法改变旋转的中心点，下面介绍两种方法旋转，可以根据自己的需求使用，关键是理解旋转的原理
旋转方法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
此种方法是，先将中心点平移到矩形中心，接着旋转，绘制，再还原回原来的状态，此种方法是在绘制好之后再还原，但是绘制的位置和距离等都需要重新计算
<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>本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
