怎么畫線段？
上一講我們已經得到了咱們的畫布和畫筆，在發揮藝術家之魂前，還是要像小孩牙牙學語一樣，我們也得從畫一條線段開始。因為畫線段是最簡單的，最基礎的。但是別小看了它。下面是我從度娘那里找到的一個由線條組成的圖像。
是不是很有魔性？
言歸正傳。怎么畫線條？和現實中畫畫差不多：
- 移動畫筆，使畫筆移動至繪畫的開始處
- 確定第一筆的停止點
- 規劃好之后，選擇畫筆（包括畫筆的粗細和顏色等）
- 確定繪制
因為Canvas是基于狀態的繪制（很重要，后面會解釋），所以前面幾步都是在確定狀態，最后一步才會具體繪制。
移動畫筆(moveTo())
之前我們獲得了畫筆context，所以以此為例，給出改方法的使用實例——context.moveTo(100,100)。這句代碼的意思是移動畫筆至(100,100)這個點（單位是px）。記住，這里是以canvas畫布的左上角為笛卡爾坐標系的原點，且y軸的正方向向下，x軸的正方向向右。
筆畫停點(lineTo())
同理，context.lineTo(600,600)。這句的意思是從上一筆的停止點繪制到(600,600)這里。不過要清楚，這里的moveTo()``lineTo()都只是狀態而已，是規劃，是我準備要畫，還沒有開始畫，只是一個計劃而已！
選擇畫筆
這里我們暫且只設置一下畫筆的顏色和粗細。
context.lineWidth = 5，這句話的意思是設置畫筆(線條)的粗細為10px。
context.strokeStyle = "#AA394C"，這句話的意思是設置畫筆(線條)的顏色為玫紅色。
因為Canvas是基于狀態的繪制，所以我們在選擇畫筆粗細和顏色的同時，其實也是選擇了線條的粗細和顏色。
確定繪制
確定繪制只有兩種方法，fill()和stroke()，有點繪畫基礎的應該知道，前者是指填充，后者是指描邊。因為我們只是繪制線條，所以只要描邊就可以了。調用代碼context.stroke()即可。
畫一個線條
不就一條線段嗎！廢話了這么多！那我們就開始畫吧。
<!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(600,600);
context.lineWidth = 5;
context.strokeStyle = "#AA394C";
context.stroke();
}
</script>
</body>
</html>
運行結果：
(一直有小伙伴問我頁面右下角的熊是什么鬼？哦哦，之前忘解釋了，那個是我的防偽水印！??)
我還標注了一個頁面解析圖，供大家參考。
這里我將原本<canvas>標簽中的width和height去掉了，但在JavaScript代碼中設置了canvas對象的width和height的屬性。
小結：要設置畫布的大小，只有這兩種方法
- 在
<canvas>標簽中設置；
- 在JS代碼中設置
canvas的屬性
怎么樣，是不是非常的酷。接下來我們要加快腳步了，繪制一個多線條組成的圖形。是不是感覺自己離藝術家又進了一步呢？別看這只是簡簡單單的一條線段，這一畫只是我們的一小步，但卻是人類的一大步！??
如果您喜歡本書，請使用支付寶掃描下面的二維碼捐助作者。
謝謝您的支持！也歡迎您訂閱本書。
如果書中有疏漏或錯誤之處，敬請您指出，期待您的pull request。如果有任何疑問也可以發送issue。
本人郵箱：airing@ursb.me
本人博客：http://ursb.me
本書地址：http://airingursb.gitbooks.io/canvas
本書github：http://github.com/airingursb/canvas
