今天小编跟大家讲解下有关canvas旋转画笔 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关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>来源：爱蒂网
