如果你還不知道canvas是什么，可以看看.

在學(xué)畫畫的時(shí)候，線條是最基本的了，而線條的連接可以組成任何圖形。在canvas中也是如此。

在開始之前我們先拿出畫布和畫筆：

復(fù)制代碼代碼如下:

var cvs = document.getelementbyid('cvs'); //畫布

var ctx = cvs.getcontext('2d'); // 畫筆

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

復(fù)制代碼代碼如下:

ctx.moveto(x,y)

此過程中不會畫出任何圖形，相當(dāng)于你提著筆在畫布上晃來晃去。

但晃來晃去是沒用的，我們必須開始畫。先畫最簡單的：直線

畫直線的方法即lineto，他的參數(shù)和moveto一樣的，都是一個(gè)點(diǎn)。

ctx.lineto(x,y)當(dāng)然，你畫線的時(shí)候，落筆點(diǎn)也跟著移動了，所以lineto之后落筆點(diǎn)就變成了他的目標(biāo)點(diǎn)了。

復(fù)制代碼代碼如下:

ctx.moveto(100,100);

ctx.lineto(200,100);

此時(shí)你刷新網(wǎng)頁，會發(fā)現(xiàn)畫布上沒有預(yù)想中的線，什么也沒有。因?yàn)槲覀冞€少了一個(gè)步驟.lineto其實(shí)是畫的一條“路徑”，本身是不可見的。如果要讓他顯示出來，我們必須對他進(jìn)行“畫”的操作。

用過ps的同學(xué)，肯定能知道圖形的兩種模式，一種是填充，另一種是描邊。現(xiàn)在我們已經(jīng)畫了一條線，相當(dāng)于ps中勾了一條路徑，此時(shí)給路徑描一下邊，就能顯示出圖形了。

canvas描邊的方法是stroke().現(xiàn)在讓我們把代碼補(bǔ)全：

復(fù)制代碼代碼如下:

ctx.moveto(100,100);

ctx.lineto(200,100);

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

復(fù)制代碼代碼如下:

ctx.moveto(100,100);

ctx.lineto(200,100);

ctx.lineto(200,200);

ctx.lineto(100,200);

ctx.lineto(100,100);

ctx.stroke();

這里我們就是先繪出全部路徑，再一次性描邊。

——–作者的抱怨：canvas繪圖有個(gè)不好的地方就是：基本靠猜，很不直觀。

嚴(yán)重提示：canvas的繪圖過程(即填充與描邊)是非常消耗資源的，如果想節(jié)省系統(tǒng)資源提高效率，最好是繪制好所有路徑，再一次性填充或描邊圖形。

由上面的圖形我們可以看出，默認(rèn)的線條粗細(xì)是1px，而線條顏色是黑色。當(dāng)然我們可以設(shè)置他們,但奇怪的是設(shè)置線條寬度是linewidth，而設(shè)置線條樣式的卻叫strokestyle，為什么不是linestyle呢？我也不知道。：

復(fù)制代碼代碼如下:

ctx.linewidth = 10;

ctx.strokestyle = 'rgba(255,0,0,0.5)';

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

如圖1，刷新一下，好像有點(diǎn)不對呢！怎么左上角缺了一小塊似得？這不是錯覺。原因嘛要從canvas的線條繪制方式說起。

問題：如果我畫的矩形路徑是寬高都是100，此時(shí)我的邊線寬度是10px，那么這個(gè)描了邊的矩形整體寬高是多少？是100+10*2=120嗎？

如果邊線是完全描在路徑外側(cè)的話，那么就是120。但canvas不是。canvas中的線條都有一條“中線”，這條中線位于line的絕對中間，線條的筆畫以中線向兩側(cè)擴(kuò)展。比如你的線條寬度是1，那么中線就在0.5的位置；寬度是5，那么中線就是在2.5。canvas的圖形在描邊的時(shí)候，都是路徑與line的中線貼合，然后描邊。如圖2：

所以，描邊的時(shí)候線的一半在外側(cè)，一半在內(nèi)側(cè)，即上面的矩形的整體寬度是100+(10/2)*2，等于110.

也正是因?yàn)檫@個(gè)原因，左上角出現(xiàn)缺角就理所當(dāng)然了。因?yàn)檫@里沒人畫。

但為什么其余的角沒有出現(xiàn)缺口呢？看你的圖不是4個(gè)角都有缺口嗎？

那是因?yàn)?#xff0c;我畫線的過程中沒有把畫筆“提起來”，畫筆是連續(xù)的，即沒有moveto過。不信我們現(xiàn)在來moveto一下：

復(fù)制代碼代碼如下:

ctx.moveto(100,100);

ctx.lineto(200,100);

ctx.moveto(200,100); //注意這里

ctx.lineto(200,200);

ctx.lineto(100,200);

ctx.lineto(100,100);

ctx.linewidth = 10;

ctx.strokestyle = 'rgba(255,0,0,0.5)';

ctx.stroke();

我們再畫第二條線之前moveto了一下，而且moveto連坐標(biāo)都沒變，還是那個(gè)點(diǎn)，但刷新后圖形變成了這個(gè)樣子[圖3]：

明白了？因?yàn)槲覀儼压P提起來了。

現(xiàn)在我們刪掉moveto，不要糾結(jié)他了，我們來思考一下如何把左上角那個(gè)缺角給補(bǔ)上？

首先問個(gè)問題，我們的路徑閉合了嗎？這不是廢話么，我們不是已經(jīng)把路徑繞回原點(diǎn)了么？當(dāng)然算是閉合了！

錯！這樣只是讓路徑最后一個(gè)點(diǎn)和起點(diǎn)重合了而已，路徑本身卻沒有閉合！

canvas怎么閉合路徑？用closepath().

復(fù)制代碼代碼如下:

ctx.moveto(100,100);

ctx.lineto(200,100);

ctx.lineto(200,200);

ctx.lineto(100,200);

ctx.lineto(100,100);

ctx.closepath();//閉合路徑

ctx.linewidth = 10;

ctx.strokestyle = 'rgba(255,0,0,0.5)';

ctx.stroke();

此時(shí)刷新，就是一個(gè)完美的正方形了。圖4：

無論我們把線條改到多粗————越粗越有人喜歡是吧？————這個(gè)四方形的四個(gè)角都是規(guī)矩的直角，不會出現(xiàn)圓滑的情況。圓滑的角是什么情況？請看ps中的四方形描邊，圖5：

看到了吧，越粗的邊線，他的角的圓弧越大。

如果我想canvas里面的邊線也和ps這種一樣，有沒有辦法呢？當(dāng)然有，就是linejoin屬性。

linejoin，意思即線的交匯處，有3個(gè)屬性：miter(默認(rèn)，尖角)，bevel(斜角),round(圓角)，如圖6：

?

毫無疑問我們一下就能明白我們的矩形用的是尖角，所以試著把他改成圓角看看：

圖形變成了這樣，圖7：

?

有點(diǎn)像ps的了吧？

另外，通過前面圖我們了解到，canvas的線條兩端是平的，可不可以改呢？畢竟平的不好看。

也是可以的，即linecap屬性，這個(gè)就是定義線條的端點(diǎn)。linecap有3個(gè)值：butt(平，默認(rèn)),round(圓),square(方)，如圖8

?

看圖就能發(fā)現(xiàn)，其實(shí)平頭跟方頭是一樣的，區(qū)別只是平頭沒有伸出去那么一截。圓頭和方頭都會伸出去一截，這一節(jié)是多長呢？就是線條寬度的一半。

你有沒有想到什么？哈哈，前面的閉合路徑的問題，如果我們把linecap設(shè)為方頭，效果也是一樣的！

但為了保險(xiǎn)起見，我們還是要把路徑閉合了，切記！

我還要提醒一下：閉合的路徑?jīng)]有端點(diǎn)！所以閉合的路徑上看不到端點(diǎn)的樣式。

另外：linecap與linejoin有點(diǎn)相似，注意不要搞混。

如果你眼尖并且運(yùn)氣不好，你可能會發(fā)現(xiàn)有時(shí)候1像素的線條不是1像素寬，好像要寬一些，模糊一些。如圖9：

恭喜你!你遇到了一個(gè)不是bug的bug。這個(gè)很特別，我把他放到下一篇文章講吧

總結(jié)

以上是生活随笔為你收集整理的html5点线的设置,html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。