canvas系列教程之多線條組成圖形

虛竹子發表於2019-02-25
Canvas

繪製折線

上一節中，我們已經成功繪製了一條線段。那麼，如果我要繪製有兩個筆畫甚至是很多筆畫的折線怎麼辦呢？ 聰明的小夥伴肯定已經想到了，這還不簡單，複用lineTo()就可以了。下面我就獻醜隨便畫了一條優美的折線~

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>繪製折線</title>
</head>
<body>
<div id="canvas-warp">
    <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">
        你的瀏覽器居然不支援Canvas？！趕快換一個吧！！
    </canvas>
</div>

<script>
    window.onload = function(){
        var canvas = document.getElementById("canvas");
        canvas.width = 800;
        canvas.height = 600;
        var context = canvas.getContext("2d");

        context.moveTo(100,100);
        context.lineTo(300,300);
        context.lineTo(100,500);
        context.lineWidth = 5;
        context.strokeStyle = "#AA394C";
        context.stroke();
    }
</script>
</body>
</html>
複製程式碼

執行結果：

演示4-1
繪製多條折線 那同理，我們要繪製多條樣式各不相同的折線怎麼辦呢？比如我們在這裡畫三條折線，分別是紅色、藍色、黑色。聰明的小夥伴肯定想到了，這還不簡單，只需要平移一下再改下畫筆顏色就行了。程式碼格式都一樣的，複製就可以了。程式碼如下。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>繪製折線</title>
</head>
<body>
<div id="canvas-warp">
    <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">
        你的瀏覽器居然不支援Canvas？！趕快換一個吧！！
    </canvas>
</div>

<script>
    window.onload = function(){
        var canvas = document.getElementById("canvas");
        canvas.width = 800;
        canvas.height = 600;
        var context = canvas.getContext("2d");

        context.moveTo(100,100);
        context.lineTo(300,300);
        context.lineTo(100,500);
        context.lineWidth = 5;
        context.strokeStyle = "red";
        context.stroke();

        context.moveTo(300,100);
        context.lineTo(500,300);
        context.lineTo(300,500);
        context.lineWidth = 5;
        context.strokeStyle = "blue";
        context.stroke();

        context.moveTo(500,100);
        context.lineTo(700,300);
        context.lineTo(500,500);
        context.lineWidth = 5;
        context.strokeStyle = "black";
        context.stroke();
    }
</script>
</body>
</html>
複製程式碼

執行結果：

演示4-2
咦？是不是很奇怪？說好的先紅色，再藍色，再黑色呢？怎麼全是黑色了？

其實，這裡的原因是我之前一直強調的一點——Canvas是基於狀態的繪製。

什麼意思呢？其實這段程式碼每次使用stroke()時，它都會把之前設定的狀態再繪製一遍。第一次stroke()時，繪製一條紅色的折線；第二次stroke()時，會再重新繪製之前的那條紅色的折線，但是這個時候的畫筆已經被更換成藍色的了，所以畫出的折線全是藍色的。換言之，strokeStyle屬性被覆蓋了。同理，第三次繪製的時候，畫筆顏色是最後的黑色，所以會重新繪製三條黑色的折線。所以，這裡看到的三條折線，其實繪製了3次，一共繪製了6條折線。

那麼，我想繪製三條折線，難道就沒有辦法了嗎？藝術家之魂到此為止了麼？沒救了麼？不，還有辦法。

使用 beginPath() 開始繪製

為了讓繪製方法不重複繪製，我們可以在每次繪製之前加上beginPath()，代表下次繪製的起始之處為beginPath()之後的程式碼。我們在三次繪製之前分別加上context.beginPath()。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>繪製折線</title>
</head>
<body>
<div id="canvas-warp">
    <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">
        你的瀏覽器居然不支援Canvas？！趕快換一個吧！！
    </canvas>
</div>

<script>
    window.onload = function(){
        var canvas = document.getElementById("canvas");
        canvas.width = 800;
        canvas.height = 600;
        var context = canvas.getContext("2d");

        context.beginPath();
        context.moveTo(100,100);
        context.lineTo(300,300);
        context.lineTo(100,500);
        context.lineWidth = 5;
        context.strokeStyle = "red";
        context.stroke();

        context.beginPath();
        context.moveTo(300,100);
        context.lineTo(500,300);
        context.lineTo(300,500);
        context.lineWidth = 5;
        context.strokeStyle = "blue";
        context.stroke();

        context.beginPath();
        context.moveTo(500,100);
        context.lineTo(700,300);
        context.lineTo(500,500);
        context.lineWidth = 5;
        context.strokeStyle = "black";
        context.stroke();
    }
</script>
</body>
</html>
複製程式碼

執行結果：

演示4-3
可以看到，這裡得到了我們預想的結果。因為使用了beginPath()，所以這裡的繪製過程如我們所想的那樣，只繪製了三次，而且每次只繪製一條折線。beginPath()是繪製設定狀態的起始點，它之後程式碼設定的繪製狀態的作用域結束於繪製方法stroke()、fill()或者closePath()，至於closePath()之後會講到。

所以我們每次開始繪製前都務必要使用beginPath()，為了程式碼的完整性，建議大家在每次繪製結束後使用closePath()。大多數情況下不使用是沒有什麼關係的，但是使用的話可以增強程式碼的可讀性以及意想不到的效果。什麼效果呢？下一節我會介紹。

劇透一下，下一節我們開始繪製矩形！！怎麼樣，從上一節的“一畫”（線條），到這一節的“兩畫”（折線），以及下一節課的“四畫”（矩形），是不是很激動呢？讓我們向藝術家之路繼續前進！?

相關文章