共计 2522 个字符，预计需要花费 7 分钟才能阅读完成。
最近在做 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>
正文完
发表至： javascript
2019-09-18
