canvas一些小知识记录

飞翔的鱼

2019-09-19

关注关注

最近在做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>

canvas 旋转图形