JavaScript <canvas>绘制缩放图像

Question

令人惊讶的Illustrator插件Ai->canvas将任意复杂的Illustrator图像导出到基于<canvas>的Javascript代码中。例如，这是绿色广场150x150的代码。

function draw(ctx) {

  // layer4/Path
  ctx.save();
  ctx.beginPath();
  ctx.moveTo(150.0, 150.0);
  ctx.lineTo(0.0, 150.0);
  ctx.lineTo(0.0, 0.0);
  ctx.lineTo(150.0, 0.0);
  ctx.lineTo(150.0, 150.0);
  ctx.closePath();
  ctx.fillStyle = "rgb(0, 255, 0)";
  ctx.fill();
  ctx.restore();
}

这是一个愚蠢的例子，因为用矩形画正方形更好，但是无论如何，对于复杂的图像，这是非常宝贵的。问题是缩放。

如何转换由Ai->画布输出的泛型绘图函数以接受缩放因子？这个正方形的例子非常直接，但是我想要一些更通用的东西来应用于在画布上绘制Javascript函数(带有弧形、圆圈、bezier曲线.)。谢谢

Answer 1

一种选择是使用画布的scale函数，例如：

ctx.scale(xFactor, yFactor);

更多在这里