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-＆gt; canvas转换通用绘图函数输出以接受比例因子？这个方形示例非常简单，但是我想要一些更通用的东西应用于画布上的Javascript函数绘图（带有弧形，圆形，贝塞尔曲线......）。感谢

Answer 1

一种选择是使用画布的scale功能，例如：

ctx.scale(xFactor, yFactor);

More here

JavaScript <canvas>绘制缩放图像</canvas>

1 个答案: