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>
东莞vi设计https://www.houdianzi.com/dgvi/ 豌豆资源网站大全https://55wd.com
旋转方法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>