怎么畫(huà)線段？
上一講我們已經(jīng)得到了咱們的畫(huà)布和畫(huà)筆昆稿，在發(fā)揮藝術(shù)家之魂前纺座，還是要像小孩牙牙學(xué)語(yǔ)一樣，我們也得從畫(huà)一條線段開(kāi)始溉潭。因?yàn)楫?huà)線段是最簡(jiǎn)單的净响，最基礎(chǔ)的。但是別小看了它喳瓣。下面是我從度娘那里找到的一個(gè)由線條組成的圖像馋贤。
是不是很有魔性？
言歸正傳畏陕。怎么畫(huà)線條配乓？和現(xiàn)實(shí)中畫(huà)畫(huà)差不多：
- 移動(dòng)畫(huà)筆，使畫(huà)筆移動(dòng)至繪畫(huà)的開(kāi)始處
- 確定第一筆的停止點(diǎn)
- 規(guī)劃好之后惠毁，選擇畫(huà)筆（包括畫(huà)筆的粗細(xì)和顏色等）
- 確定繪制
因?yàn)?strong>Canvas是基于狀態(tài)的繪制（很重要犹芹，后面會(huì)解釋），所以前面幾步都是在確定狀態(tài)鞠绰，最后一步才會(huì)具體繪制腰埂。
移動(dòng)畫(huà)筆(moveTo())
之前我們獲得了畫(huà)筆context，所以以此為例洞豁，給出改方法的使用實(shí)例——context.moveTo(100,100)盐固。這句代碼的意思是移動(dòng)畫(huà)筆至(100,100)這個(gè)點(diǎn)（單位是px）。記住丈挟，這里是以canvas畫(huà)布的左上角為笛卡爾坐標(biāo)系的原點(diǎn)刁卜，且y軸的正方向向下，x軸的正方向向右曙咽。
筆畫(huà)停點(diǎn)(lineTo())
同理蛔趴，context.lineTo(600,600)。這句的意思是從上一筆的停止點(diǎn)繪制到(600,600)這里例朱。不過(guò)要清楚孝情，這里的moveTo()``lineTo()都只是狀態(tài)而已，是規(guī)劃洒嗤，是我準(zhǔn)備要畫(huà)箫荡，還沒(méi)有開(kāi)始畫(huà)，只是一個(gè)計(jì)劃而已渔隶！
選擇畫(huà)筆
這里我們暫且只設(shè)置一下畫(huà)筆的顏色和粗細(xì)羔挡。
context.lineWidth = 5洁奈，這句話的意思是設(shè)置畫(huà)筆(線條)的粗細(xì)為10px。
context.strokeStyle = "#AA394C"绞灼，這句話的意思是設(shè)置畫(huà)筆(線條)的顏色為玫紅色利术。
因?yàn)镃anvas是基于狀態(tài)的繪制，所以我們?cè)谶x擇畫(huà)筆粗細(xì)和顏色的同時(shí)低矮，其實(shí)也是選擇了線條的粗細(xì)和顏色印叁。
確定繪制
確定繪制只有兩種方法，fill()和stroke()军掂，有點(diǎn)繪畫(huà)基礎(chǔ)的應(yīng)該知道轮蜕，前者是指填充，后者是指描邊蝗锥。因?yàn)槲覀冎皇抢L制線條肠虽，所以只要描邊就可以了。調(diào)用代碼context.stroke()即可玛追。
畫(huà)一個(gè)線條
不就一條線段嗎税课！廢話了這么多！那我們就開(kāi)始畫(huà)吧痊剖。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>從線條開(kāi)始</title>
</head>
<body>
<div id="canvas-warp">
<canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">
你的瀏覽器居然不支持Canvas韩玩？！趕快換一個(gè)吧Ｂ侥佟找颓！
</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>
運(yùn)行結(jié)果：
(一直有小伙伴問(wèn)我頁(yè)面右下角的熊是什么鬼？哦哦叮贩，之前忘解釋了击狮，那個(gè)是我的防偽水印益老！??)
我還標(biāo)注了一個(gè)頁(yè)面解析圖彪蓬，供大家參考。
這里我將原本<canvas>標(biāo)簽中的width和height去掉了捺萌，但在JavaScript代碼中設(shè)置了canvas對(duì)象的width和height的屬性档冬。
小結(jié)：要設(shè)置畫(huà)布的大小，只有這兩種方法
- 在
<canvas>標(biāo)簽中設(shè)置桃纯；
- 在JS代碼中設(shè)置
canvas的屬性
怎么樣酷誓，是不是非常的酷。接下來(lái)我們要加快腳步了态坦，繪制一個(gè)多線條組成的圖形盐数。是不是感覺(jué)自己離藝術(shù)家又進(jìn)了一步呢？別看這只是簡(jiǎn)簡(jiǎn)單單的一條線段伞梯，這一畫(huà)只是我們的一小步玫氢，但卻是人類的一大步着茸！??
如果您喜歡本書(shū)，請(qǐng)使用支付寶掃描下面的二維碼捐助作者琐旁。
謝謝您的支持！也歡迎您訂閱本書(shū)猜绣。
如果書(shū)中有疏漏或錯(cuò)誤之處灰殴，敬請(qǐng)您指出，期待您的pull request掰邢。如果有任何疑問(wèn)也可以發(fā)送issue牺陶。
本人郵箱：airing@ursb.me
本人博客：http://ursb.me
本書(shū)地址：http://airingursb.gitbooks.io/canvas
本書(shū)github：http://github.com/airingursb/canvas
