html5Canvas如何實現(xiàn)畫直線與設(shè)置線條的樣式-創(chuàng)新互聯(lián)

html5 Canvas如何實現(xiàn)畫直線與設(shè)置線條的樣式？這個問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！

成都創(chuàng)新互聯(lián)長期為上1000+客戶提供的網(wǎng)站建設(shè)服務(wù)，團隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為西平企業(yè)提供專業(yè)的網(wǎng)站建設(shè)、網(wǎng)站設(shè)計，西平網(wǎng)站改版等技術(shù)服務(wù)。擁有十年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

在學(xué)畫畫的時候，線條是最基本的了，而線條的連接可以組成任何圖形。在Canvas中也是如此,接下來為您詳細介紹最簡單的線條的畫法如果你還不知道Canvas是什么，可以看看上一篇.
在學(xué)畫畫的時候，線條是最基本的了，而線條的連接可以組成任何圖形。在Canvas中也是如此。
在開始之前我們先拿出畫布和畫筆：

var cvs = document.getElementById('cvs'); //畫布 
var ctx = cvs.getContext('2d'); // 畫筆

我們畫畫的時候，落筆點是不固定的，隨時都會變。canvas雖然不是通過手來決定落筆點，但也有一個方法,就是moveTo。moveTo的作用相當(dāng)于把筆尖提離畫布，然后移動到指定的點（即坐標(biāo)）。

ctx.moveTo(x,y)

此過程中不會畫出任何圖形，相當(dāng)于你提著筆在畫布上晃來晃去。
但晃來晃去是沒用的，我們必須開始畫。先畫最簡單的：直線
畫直線的方法即lineTo，他的參數(shù)和moveTo一樣的，都是一個點。
ctx.lineTo(x,y)當(dāng)然，你畫線的時候，落筆點也跟著移動了，所以lineTo之后落筆點就變成了他的目標(biāo)點了。

ctx.moveTo(100,100); 
ctx.lineTo(200,100);

此時你刷新網(wǎng)頁，會發(fā)現(xiàn)畫布上沒有預(yù)想中的線，什么也沒有。因為我們還少了一個步驟.lineTo其實是畫的一條“路徑”，本身是不可見的。如果要讓他顯示出來，我們必須對他進行“畫”的操作。
用過PS的同學(xué)，肯定能知道圖形的兩種模式，一種是填充，另一種是描邊?，F(xiàn)在我們已經(jīng)畫了一條線，相當(dāng)于PS中勾了一條路徑，此時給路徑描一下邊，就能顯示出圖形了。
canvas描邊的方法是stroke().現(xiàn)在讓我們把代碼補全：

ctx.moveTo(100,100); 
ctx.lineTo(200,100);

ctx.stroke();此時刷新，就能看到一條線了。當(dāng)然，你也可以連續(xù)繪制出幾百條路徑，再執(zhí)行描邊動作，即可一下畫出幾百條線?，F(xiàn)在我們來用4條線畫一個矩形：

ctx.moveTo(100,100); 
ctx.lineTo(200,100); 
ctx.lineTo(200,200); 
ctx.lineTo(100,200); 
ctx.lineTo(100,100); 
ctx.stroke();

這里我們就是先繪出全部路徑，再一次性描邊。
——–作者的抱怨：Canvas繪圖有個不好的地方就是：基本靠猜，很不直觀。
嚴(yán)重提示：canvas的繪圖過程（即填充與描邊）是非常消耗資源的，如果想節(jié)省系統(tǒng)資源提高效率，最好是繪制好所有路徑，再一次性填充或描邊圖形。
由上面的圖形我們可以看出，默認的線條粗細是1px，而線條顏色是黑色。當(dāng)然我們可以設(shè)置他們,但奇怪的是設(shè)置線條寬度是lineWidth，而設(shè)置線條樣式的卻叫strokeStyle，為什么不是lineStyle呢？我也不知道。：

ctx.lineWidth = 10; 
ctx.strokeStyle = 'rgba(255,0,0,0.5)';

上面的代碼把線條寬度設(shè)置成了10px，線條顏色變成了半透明的紅色。