canvas笔记-lineTo()与moveTo()的区别

首先来看下如下代码：

        let canvas = document.getElementById("canvas");
        canvas.width = 800;
        canvas.height = 800;
 
        let context = canvas.getContext("https://cdn.jxasp.com:9143/image/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("https://cdn.jxasp.com:9143/image/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的第一个点就没有东西，就是第一个图。