上一節(jié)中，我們已經(jīng)成功繪制了一條線段。那么，如果我要繪制有兩個筆畫甚至是很多筆畫的折線怎么辦呢？
聰明的小伙伴肯定已經(jīng)想到了，這還不簡單，復(fù)用lineTo()就可以了。下面我就獻(xiàn)丑隨便畫了一條優(yōu)美的折線~
<!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>運行結(jié)果：
那同理，我們要繪制多條樣式各不相同的折線怎么辦呢？比如我們在這里畫三條折線，分別是紅色、藍(lán)色、黑色。聰明的小伙伴肯定想到了，這還不簡單，只需要平移一下再改下畫筆顏色就行了。代碼格式都一樣的，復(fù)制就可以了。代碼如下。
<!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>運行結(jié)果：
咦？是不是很奇怪？說好的先紅色，再藍(lán)色，再黑色呢？怎么全是黑色了？其實，這里的原因是我之前一直強(qiáng)調(diào)的一點——Canvas是基于狀態(tài)的繪制。
什么意思呢？其實這段代碼每次使用stroke()時，它都會把之前設(shè)置的狀態(tài)再繪制一遍。第一次stroke()時，繪制一條紅色的折線；第二次stroke()時，會再重新繪制之前的那條紅色的折線，但是這個時候的畫筆已經(jīng)被更換成藍(lán)色的了，所以畫出的折線全是藍(lán)色的。換言之，strokeStyle屬性被覆蓋了。同理，第三次繪制的時候，畫筆顏色是最后的黑色，所以會重新繪制三條黑色的折線。所以，這里看到的三條折線，其實繪制了3次，一共繪制了6條折線。
那么，我想繪制三條折線，難道就沒有辦法了嗎？藝術(shù)家之魂到此為止了么？沒救了么？不，還有辦法。
為了讓繪制方法不重復(fù)繪制，我們可以在每次繪制之前加上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>運行結(jié)果：
可以看到，這里得到了我們預(yù)想的結(jié)果。因為使用了beginPath()，所以這里的繪制過程如我們所想的那樣，只繪制了三次，而且每次只繪制一條折線。beginPath()是繪制設(shè)置狀態(tài)的起始點，它之后代碼設(shè)置的繪制狀態(tài)的作用域結(jié)束于繪制方法stroke()、fill()或者closePath()，至于closePath()之后會講到。
所以我們每次開始繪制前都務(wù)必要使用beginPath()，為了代碼的完整性，建議大家在每次繪制結(jié)束后使用closePath()。大多數(shù)情況下不使用是沒有什么關(guān)系的，但是使用的話可以增強(qiáng)代碼的可讀性以及意想不到的效果。什么效果呢？下一節(jié)我會介紹。
劇透一下，下一節(jié)我們開始繪制矩形?。≡趺礃?，從上一節(jié)的“一畫”（線條），到這一節(jié)的“兩畫”（折線），以及下一節(jié)課的“四畫”（矩形），是不是很激動呢？讓我們向藝術(shù)家之路繼續(xù)前進(jìn)！
掃碼關(guān)注鍍金池微信號
手機(jī)訂課，優(yōu)惠多多