javascript - 在 HTML5 canvas 中,translate() 和 moveTo() javascript 函数有什么区别?

标签 javascript html canvas

我目前正在学习使用canvas,不明白这两个功能的区别。据我所知,翻译方法“移动 Canvas ”?谁能解释一下?

编辑:moveTo 是否仅在路径上下文中使用?

最佳答案

比 Kolink 更具体一点,因为我认为解释有点模糊;

-你传递给moveTo的坐标是一条新线(或形状)的起点;就像从纸上拿起笔并将其放在新位置(新坐标)一样。

-lineTo 的功能是“在纸上移动笔以画一条线”(到您给定的新坐标,因为您需要两个点来绘制一条线,显然)

-您可以一个接一个地放置多个 lineTo 调用,它将使用您结束的最后一个点来继续该行,如下所示:

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

这是一个显示结果的简单 fiddle :http://jsfiddle.net/fbZKu/ (您甚至可以使用 ctx.fill()“填充”您制作的这些形状!)

-translate的作用是将 Canvas 的(0,0)坐标(左上角)移动到新坐标。

我希望这能让事情更清楚一点!编码愉快! :)

关于javascript - 在 HTML5 canvas 中,translate() 和 moveTo() javascript 函数有什么区别?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19149035/

相关文章:

javascript - 使用 AngularJS 缩小 Javascript - 依赖注入(inject)错误

javascript - html5 canvas 旋转文本的错误尺寸

javascript - HTML5 拖放不起作用

javascript - 使 Html5 Canvas 及其包含的图像跨浏览器响应

html - 如何在图像顶部垂直和水平居中对齐描述?

php - 如何使用 PHP 在 Web 浏览器中运行 C 代码

javascript - 使用 Knockout Js 进行 Ajax 数据绑定(bind)

javascript - 自定义轮播间隔?

javascript - 如何将两个数据拆分为一个数组元素

javascript - 使用javascript从2个选择字段计算数据到输入字段