canvas一些小知识记录

时间 2019-11-08

标签 canvas 些小知识记录繁體版

原文原文链接

最近在作canvas相关的功能，遇到了一些问题，写这篇文章记录一下本身对canvas不熟悉的一些知识点

1. canvas旋转

canvas旋转画笔，能够使用rotate方法，rotate方法是绕着中心点旋转的，中心点默认是左上角的(0,0)位置，能够使用translate方法改变旋转的中心点，下面介绍两种方法旋转，能够根据本身的需求使用，关键是理解旋转的原理html

1.旋转方法1

此种方法是，先将中心点平移到矩形中心，接着旋转，再将中心点平移回原点(0, 0)，按照以前的位置和大小绘制即为绕中心旋转后的图形，此种方法，在还原以前，绘制的东西都会绕着调用rotate的位置旋转canvas

<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

此种方法是，先将中心点平移到矩形中心，接着旋转，绘制，再还原回原来的状态，此种方法是在绘制好以后再还原，可是绘制的位置和距离等都须要从新计算code

<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>