首先來看下如下代碼：

let canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;let context = canvas.getContext("2d");context.lineWidth = 10;context.lineTo(10, 10);context.lineTo(80, 10);context.lineTo(80, 80);context.lineTo(10, 80);context.lineTo(10, 10);context.stroke();

程序運行截圖如下：

把代碼改成如下：

let canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;let context = canvas.getContext("2d");context.lineWidth = 10;context.moveTo(10, 10);context.lineTo(80, 10);context.lineTo(80, 80);context.lineTo(10, 80);context.lineTo(10, 10);context.stroke();

運行截圖如下：

總結下：

這里可以看到moveTo，是把筆尖moveTo到指定位置，然后使用lineTo去畫。

而lineTo是直接畫到指定的位置。當沒有設置moveTo的時候，那么這個位置就為空，這樣話lineTo的第一個點就沒有東西，就是第一個圖。

?

?

?

總結

以上是生活随笔為你收集整理的canvas笔记-lineTo()与moveTo()的区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。