canvas筆記-lineTo()與moveTo()的區別

首先來看下如下代碼：

        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的第一個點就沒有東西，就是第一個圖。