怎么畫線條？和現實中畫畫差不多：
1.移動畫筆，使畫筆移動至繪畫的開始處
2.確定第一筆的停止點
3.規劃好之后，選擇畫筆（包括畫筆的粗細和顏色等）
4.確定繪制

因為Canvas是基于狀態的繪制（很重要，后面會解釋），所以前面幾步都是在確定狀態，最后一步才會具體繪制。
1.移動畫筆(moveTo())
之前我們獲得了畫筆context，所以以此為例，給出改方法的使用實例——context.moveTo(100,100)。這句代碼的意思是移動畫筆至(100,100)這個點（單位是px）。記住，這里是以canvas畫布的左上角為笛卡爾坐標系的原點，且y軸的正方向向下，x軸的正方向向右。
2.筆畫停點(lineTo())
同理，context.lineTo(600,600)。這句的意思是從上一筆的停止點繪制到(600,600)這里。不過要清楚，這里的moveTo()``lineTo()都只是狀態而已，是規劃，是我準備要畫，還沒有開始畫，只是一個計劃而已！
3.選擇畫筆
這里我們暫且只設置一下畫筆的顏色和粗細。
context.lineWidth = 5，這句話的意思是設置畫筆(線條)的粗細為10px。
context.strokeStyle = "#AA394C"，這句話的意思是設置畫筆(線條)的顏色為玫紅色。
因為Canvas是基于狀態的繪制，所以我們在選擇畫筆粗細和顏色的同時，其實也是選擇了線條的粗細和顏色。
4.確定繪制
確定繪制只有兩種方法，fill()和stroke()，有點繪畫基礎的應該知道，前者是指填充，后者是指描邊。因為我們只是繪制線條，所以只要描邊就可以了。調用代碼context.stroke()即可。

畫一個線條
不就一條線段嗎！廢話了這么多！那我們就開始畫吧。

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表