平移 translate

translate(x, y);

用来移动 canvas原点到指定的位置(坐标变换)

translate方法接受两个参数:

  • x 是左右偏移量
  • y 是上下偏移量

在做变形之前先保存状态是一个良好的习惯。大多数情况下,调用 restore 方法比手动恢复原先的状态要简单得多。又如果你是在一个循环中做位移但没有保存和恢复canvas 的状态,很可能到最后会发现怎么有些东西不见了,那是因为它很可能已经超出 canvas 范围以外了。

比如通过 translate 绘制重复的图形:

var canvas = document.getElementById('canvas')
window.addEventListener('load', draw(canvas), false);
function draw(canvas) {
  var context = canvas.getContext('2d')
  for (let i = 0; i < 5; i++) {
    for (let j = 0; j < 5; j++) {
      context.save();
      context.fillStyle=`rgb(${i*40}, ${j*30}, ${(i + j)*20})`;
      context.translate(i * 100, j * 100);
      context.fillRect(10, 10, 80, 50);
      context.restore();
    }
  }
}

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress