在HTML5画布中，translate()和moveTo()两个JavaScript函数有什么区别？

Question

我目前正在学习如何使用画布(canvas)，但是我不理解这两个函数的区别。根据我所了解到的，translate方法会“移动画布”，有人可以解释一下吗？

编辑：moveTo只能在路径(path)的上下文中使用吗？

- Someone

Answer 1

想象一下你正在方格纸上画图。

moveTo 的意思是你拿起笔在纸上移动，以此来画出一条线。

translate 的意思是你将纸张在桌子上的位置进行了调整。

它们是完全不同的功能。

- Niet the Dark Absol

Answer 2

为了比Kolink更具体，我认为他的解释有点含糊不清;

-你通过moveTo传递的坐标是新行（或形状）的起点; 就像把笔从纸上拿起来并放在新位置（新坐标）上。

-lineTo的功能是“将笔移动到纸上绘制一条线”（显然需要两个点来绘制一条线，所以它会移动到你给它的一个新坐标）。

-你可以连续放置多个lineTo调用，并且它将使用你结束的最后一个点来继续线条，例如：

ctx.moveTo(100,50);
ctx.lineTo(25,175);
ctx.lineTo(175,175);
ctx.lineTo(100,50);
ctx.stroke();

这里有一个简单的示例展示了结果：http://jsfiddle.net/fbZKu/（你甚至可以用ctx.fill()来“填充”这些形状！）

- 使用translate的目的是将画布的(0,0)坐标（左上角）移动到新的坐标。

希望这能更清楚地解释一些问题！祝编码愉快！ :)

- Super Fighting Robot