在HTML5画布中,translate()和moveTo()javascript函数有什么区别？

Question

我目前正在学习使用canvas,并且不了解这两个函数之间的区别.根据我的阅读,翻译方法'移动画布'？有人可以解释一下吗？

编辑:moveTo仅在路径的上下文中使用吗？

Answer 1

想象一下,你正在绘制方格纸.

moveTo 意思是你拿起笔并将它移过纸张画一条线.

translate 意味着您可以移动纸张在桌子上的位置.

它们不可能是更多不同的功能.

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()!)

- 使用translateis将画布'(0,0)坐标(左上角)移动到新坐标.

我希望能更清楚一点!快乐的编码!:)