html5 Canvas畫(huà)圖教程(2)—畫(huà)直線與設(shè)置線條的樣式如顏色/端點(diǎn)/交匯點(diǎn)
發(fā)布時(shí)間：2013-01-09 11:24:25 作者：佚名 
我要評(píng)論
我要評(píng)論在學(xué)畫(huà)畫(huà)的時(shí)候，線條是最基本的了，而線條的連接可以組成任何圖形。在Canvas中也是如此,接下來(lái)為您詳細(xì)介紹最簡(jiǎn)單的線條的畫(huà)法
如果你還不知道Canvas是什么，可以看看上一篇.
在學(xué)畫(huà)畫(huà)的時(shí)候，線條是最基本的了，而線條的連接可以組成任何圖形。在Canvas中也是如此。
在開(kāi)始之前我們先拿出畫(huà)布和畫(huà)筆：
var cvs = document.getElementById('cvs'); //畫(huà)布
var ctx = cvs.getContext('2d'); // 畫(huà)筆
我們畫(huà)畫(huà)的時(shí)候，落筆點(diǎn)是不固定的，隨時(shí)都會(huì)變。canvas雖然不是通過(guò)手來(lái)決定落筆點(diǎn)，但也有一個(gè)方法,就是moveTo。moveTo的作用相當(dāng)于把筆尖提離畫(huà)布，然后移動(dòng)到指定的點(diǎn)（即坐標(biāo)）。
ctx.moveTo(x,y)
此過(guò)程中不會(huì)畫(huà)出任何圖形，相當(dāng)于你提著筆在畫(huà)布上晃來(lái)晃去。
但晃來(lái)晃去是沒(méi)用的，我們必須開(kāi)始畫(huà)。先畫(huà)最簡(jiǎn)單的：直線
畫(huà)直線的方法即lineTo，他的參數(shù)和moveTo一樣的，都是一個(gè)點(diǎn)。
ctx.lineTo(x,y)當(dāng)然，你畫(huà)線的時(shí)候，落筆點(diǎn)也跟著移動(dòng)了，所以lineTo之后落筆點(diǎn)就變成了他的目標(biāo)點(diǎn)了。
ctx.moveTo(100,100);
ctx.lineTo(200,100);
此時(shí)你刷新網(wǎng)頁(yè)，會(huì)發(fā)現(xiàn)畫(huà)布上沒(méi)有預(yù)想中的線，什么也沒(méi)有。因?yàn)槲覀冞€少了一個(gè)步驟.lineTo其實(shí)是畫(huà)的一條“路徑”，本身是不可見(jiàn)的。如果要讓他顯示出來(lái)，我們必須對(duì)他進(jìn)行“畫(huà)”的操作。
用過(guò)PS的同學(xué)，肯定能知道圖形的兩種模式，一種是填充，另一種是描邊。現(xiàn)在我們已經(jīng)畫(huà)了一條線，相當(dāng)于PS中勾了一條路徑，此時(shí)給路徑描一下邊，就能顯示出圖形了。
canvas描邊的方法是stroke().現(xiàn)在讓我們把代碼補(bǔ)全：
ctx.moveTo(100,100);
ctx.lineTo(200,100);
ctx.stroke();此時(shí)刷新，就能看到一條線了。當(dāng)然，你也可以連續(xù)繪制出幾百條路徑，再執(zhí)行描邊動(dòng)作，即可一下畫(huà)出幾百條線?，F(xiàn)在我們來(lái)用4條線畫(huà)一個(gè)矩形：
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的繪圖過(guò)程（即填充與描邊）是非常消耗資源的，如果想節(jié)省系統(tǒng)資源提高效率，最好是繪制好所有路徑，再一次性填充或描邊圖形。
由上面的圖形我們可以看出，默認(rèn)的線條粗細(xì)是1px，而線條顏色是黑色。當(dāng)然我們可以設(shè)置他們,但奇怪的是設(shè)置線條寬度是lineWidth，而設(shè)置線條樣式的卻叫strokeStyle，為什么不是lineStyle呢？我也不知道。：
ctx.lineWidth = 10;
ctx.strokeStyle = 'rgba(255,0,0,0.5)';
上面的代碼把線條寬度設(shè)置成了10px，線條顏色變成了半透明的紅色。
問(wèn)題：如果我畫(huà)的矩形路徑是寬高都是100，此時(shí)我的邊線寬度是10px，那么這個(gè)描了邊的矩形整體寬高是多少？是100+10*2=120嗎？
如果邊線是完全描在路徑外側(cè)的話，那么就是120。但Canvas不是。Canvas中的線條都有一條“中線”，這條中線位于line的絕對(duì)中間，線條的筆畫(huà)以中線向兩側(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)檫@里沒(méi)人畫(huà)。
但為什么其余的角沒(méi)有出現(xiàn)缺口呢？看你的圖不是4個(gè)角都有缺口嗎？
那是因?yàn)椋耶?huà)線的過(guò)程中沒(méi)有把畫(huà)筆“提起來(lái)”，畫(huà)筆是連續(xù)的，即沒(méi)有moveTo過(guò)。不信我們現(xiàn)在來(lái)moveTo一下：
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();
我們?cè)佼?huà)第二條線之前moveTo了一下，而且moveTo連坐標(biāo)都沒(méi)變，還是那個(gè)點(diǎn)，但刷新后圖形變成了這個(gè)樣子[圖3]：
明白了？因?yàn)槲覀儼压P提起來(lái)了。
現(xiàn)在我們刪掉moveTo，不要糾結(jié)他了，我們來(lái)思考一下如何把左上角那個(gè)缺角給補(bǔ)上？
首先問(wèn)個(gè)問(wèn)題，我們的路徑閉合了嗎？這不是廢話么，我們不是已經(jīng)把路徑繞回原點(diǎn)了么？當(dāng)然算是閉合了！
錯(cuò)！這樣只是讓路徑最后一個(gè)點(diǎn)和起點(diǎn)重合了而已，路徑本身卻沒(méi)有閉合！
Canvas怎么閉合路徑？用closePath().
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：
無(wú)論我們把線條改到多粗————越粗越有人喜歡是吧？————這個(gè)四方形的四個(gè)角都是規(guī)矩的直角，不會(huì)出現(xiàn)圓滑的情況。圓滑的角是什么情況？請(qǐng)看PS中的四方形描邊，圖5：
看到了吧，越粗的邊線，他的角的圓弧越大。
如果我想Canvas里面的邊線也和PS這種一樣，有沒(méi)有辦法呢？當(dāng)然有，就是lineJoin屬性。
lineJoin，意思即線的交匯處，有3個(gè)屬性：miter(默認(rèn)，尖角)，bevel（斜角）,round（圓角），如圖6：
毫無(wú)疑問(wèn)我們一下就能明白我們的矩形用的是尖角，所以試著把他改成圓角看看：
圖形變成了這樣，圖7：
有點(diǎn)像PS的了吧？
另外，通過(guò)前面圖我們了解到，Canvas的線條兩端是平的，可不可以改呢？畢竟平的不好看。
也是可以的，即lineCap屬性，這個(gè)就是定義線條的端點(diǎn)。lineCap有3個(gè)值：butt（平，默認(rèn)）,round（圓）,square（方），如圖8
看圖就能發(fā)現(xiàn)，其實(shí)平頭跟方頭是一樣的，區(qū)別只是平頭沒(méi)有伸出去那么一截。圓頭和方頭都會(huì)伸出去一截，這一節(jié)是多長(zhǎng)呢？就是線條寬度的一半。
你有沒(méi)有想到什么？哈哈，前面的閉合路徑的問(wèn)題，如果我們把lineCap設(shè)為方頭，效果也是一樣的！
但為了保險(xiǎn)起見(jiàn)，我們還是要把路徑閉合了，切記！
我還要提醒一下：閉合的路徑?jīng)]有端點(diǎn)！所以閉合的路徑上看不到端點(diǎn)的樣式。
另外：lineCap與lineJoin有點(diǎn)相似，注意不要搞混。
如果你眼尖并且運(yùn)氣不好，你可能會(huì)發(fā)現(xiàn)有時(shí)候1像素的線條不是1像素寬，好像要寬一些，模糊一些。如圖9：
恭喜你!你遇到了一個(gè)不是bug的bug。這個(gè)很特別，我把他放到下一篇文章講吧
在學(xué)畫(huà)畫(huà)的時(shí)候，線條是最基本的了，而線條的連接可以組成任何圖形。在Canvas中也是如此。
在開(kāi)始之前我們先拿出畫(huà)布和畫(huà)筆：
復(fù)制代碼
代碼如下:var cvs = document.getElementById('cvs'); //畫(huà)布
var ctx = cvs.getContext('2d'); // 畫(huà)筆
我們畫(huà)畫(huà)的時(shí)候，落筆點(diǎn)是不固定的，隨時(shí)都會(huì)變。canvas雖然不是通過(guò)手來(lái)決定落筆點(diǎn)，但也有一個(gè)方法,就是moveTo。moveTo的作用相當(dāng)于把筆尖提離畫(huà)布，然后移動(dòng)到指定的點(diǎn)（即坐標(biāo)）。
復(fù)制代碼
代碼如下:ctx.moveTo(x,y)
此過(guò)程中不會(huì)畫(huà)出任何圖形，相當(dāng)于你提著筆在畫(huà)布上晃來(lái)晃去。
但晃來(lái)晃去是沒(méi)用的，我們必須開(kāi)始畫(huà)。先畫(huà)最簡(jiǎn)單的：直線
畫(huà)直線的方法即lineTo，他的參數(shù)和moveTo一樣的，都是一個(gè)點(diǎn)。
ctx.lineTo(x,y)當(dāng)然，你畫(huà)線的時(shí)候，落筆點(diǎn)也跟著移動(dòng)了，所以lineTo之后落筆點(diǎn)就變成了他的目標(biāo)點(diǎn)了。
復(fù)制代碼
代碼如下:ctx.moveTo(100,100);
ctx.lineTo(200,100);
此時(shí)你刷新網(wǎng)頁(yè)，會(huì)發(fā)現(xiàn)畫(huà)布上沒(méi)有預(yù)想中的線，什么也沒(méi)有。因?yàn)槲覀冞€少了一個(gè)步驟.lineTo其實(shí)是畫(huà)的一條“路徑”，本身是不可見(jiàn)的。如果要讓他顯示出來(lái)，我們必須對(duì)他進(jìn)行“畫(huà)”的操作。
用過(guò)PS的同學(xué)，肯定能知道圖形的兩種模式，一種是填充，另一種是描邊。現(xiàn)在我們已經(jīng)畫(huà)了一條線，相當(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í)行描邊動(dòng)作，即可一下畫(huà)出幾百條線?，F(xiàn)在我們來(lái)用4條線畫(huà)一個(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的繪圖過(guò)程（即填充與描邊）是非常消耗資源的，如果想節(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，線條顏色變成了半透明的紅色。
問(wèn)題：如果我畫(huà)的矩形路徑是寬高都是100，此時(shí)我的邊線寬度是10px，那么這個(gè)描了邊的矩形整體寬高是多少？是100+10*2=120嗎？
如果邊線是完全描在路徑外側(cè)的話，那么就是120。但Canvas不是。Canvas中的線條都有一條“中線”，這條中線位于line的絕對(duì)中間，線條的筆畫(huà)以中線向兩側(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)檫@里沒(méi)人畫(huà)。
但為什么其余的角沒(méi)有出現(xiàn)缺口呢？看你的圖不是4個(gè)角都有缺口嗎？
那是因?yàn)椋耶?huà)線的過(guò)程中沒(méi)有把畫(huà)筆“提起來(lái)”，畫(huà)筆是連續(xù)的，即沒(méi)有moveTo過(guò)。不信我們現(xiàn)在來(lái)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();
我們?cè)佼?huà)第二條線之前moveTo了一下，而且moveTo連坐標(biāo)都沒(méi)變，還是那個(gè)點(diǎn)，但刷新后圖形變成了這個(gè)樣子[圖3]：
明白了？因?yàn)槲覀儼压P提起來(lái)了。
現(xiàn)在我們刪掉moveTo，不要糾結(jié)他了，我們來(lái)思考一下如何把左上角那個(gè)缺角給補(bǔ)上？
首先問(wèn)個(gè)問(wèn)題，我們的路徑閉合了嗎？這不是廢話么，我們不是已經(jīng)把路徑繞回原點(diǎn)了么？當(dāng)然算是閉合了！
錯(cuò)！這樣只是讓路徑最后一個(gè)點(diǎn)和起點(diǎn)重合了而已，路徑本身卻沒(méi)有閉合！
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：
無(wú)論我們把線條改到多粗————越粗越有人喜歡是吧？————這個(gè)四方形的四個(gè)角都是規(guī)矩的直角，不會(huì)出現(xiàn)圓滑的情況。圓滑的角是什么情況？請(qǐng)看PS中的四方形描邊，圖5：
看到了吧，越粗的邊線，他的角的圓弧越大。
如果我想Canvas里面的邊線也和PS這種一樣，有沒(méi)有辦法呢？當(dāng)然有，就是lineJoin屬性。
lineJoin，意思即線的交匯處，有3個(gè)屬性：miter(默認(rèn)，尖角)，bevel（斜角）,round（圓角），如圖6：
毫無(wú)疑問(wèn)我們一下就能明白我們的矩形用的是尖角，所以試著把他改成圓角看看：
圖形變成了這樣，圖7：
有點(diǎn)像PS的了吧？
另外，通過(guò)前面圖我們了解到，Canvas的線條兩端是平的，可不可以改呢？畢竟平的不好看。
也是可以的，即lineCap屬性，這個(gè)就是定義線條的端點(diǎn)。lineCap有3個(gè)值：butt（平，默認(rèn)）,round（圓）,square（方），如圖8
看圖就能發(fā)現(xiàn)，其實(shí)平頭跟方頭是一樣的，區(qū)別只是平頭沒(méi)有伸出去那么一截。圓頭和方頭都會(huì)伸出去一截，這一節(jié)是多長(zhǎng)呢？就是線條寬度的一半。
你有沒(méi)有想到什么？哈哈，前面的閉合路徑的問(wèn)題，如果我們把lineCap設(shè)為方頭，效果也是一樣的！
但為了保險(xiǎn)起見(jiàn)，我們還是要把路徑閉合了，切記！
我還要提醒一下：閉合的路徑?jīng)]有端點(diǎn)！所以閉合的路徑上看不到端點(diǎn)的樣式。
另外：lineCap與lineJoin有點(diǎn)相似，注意不要搞混。
如果你眼尖并且運(yùn)氣不好，你可能會(huì)發(fā)現(xiàn)有時(shí)候1像素的線條不是1像素寬，好像要寬一些，模糊一些。如圖9：
恭喜你!你遇到了一個(gè)不是bug的bug。這個(gè)很特別，我把他放到下一篇文章講吧
相關(guān)文章
- Microdata作為HTML5新增的一個(gè)特性，它允許開(kāi)發(fā)者在HTML文檔中添加更多的語(yǔ)義信息，以便于搜索引擎和瀏覽器更好地理解頁(yè)面內(nèi)容，本文將探討HTML5中Microdata的使用方法以及2025-04-21
在HTML語(yǔ)法中，表格主要通過(guò)< table >、< tr >和< td >3個(gè)標(biāo)簽構(gòu)成,本文通過(guò)實(shí)例代碼講解HTML5表格語(yǔ)法格式，感興趣的朋友一起看看吧2025-04-21- 這篇文章主要介紹了HTML5中使用媒體查詢和Flexbox進(jìn)行響應(yīng)式布局的方法,簡(jiǎn)要介紹了CSS Grid布局的基礎(chǔ)知識(shí)和如何實(shí)現(xiàn)自動(dòng)換行的網(wǎng)格布局，感興趣的朋友一起看看吧2025-04-21
基于Canvas的Html5多時(shí)區(qū)動(dòng)態(tài)時(shí)鐘實(shí)戰(zhàn)代碼
本文介紹了如何使用Canvas在HTML5上實(shí)現(xiàn)一個(gè)多時(shí)區(qū)動(dòng)態(tài)時(shí)鐘的web展示,通過(guò)Canvas的API,可以繪制出6個(gè)不同城市的時(shí)鐘,并且這些時(shí)鐘可以動(dòng)態(tài)轉(zhuǎn)動(dòng),每個(gè)時(shí)鐘上都會(huì)標(biāo)注出對(duì)應(yīng)的2025-03-11HTML5 data-*自定義數(shù)據(jù)屬性的示例代碼
HTML5的自定義數(shù)據(jù)屬性（data-*）提供了一種標(biāo)準(zhǔn)化的方法在HTML元素上存儲(chǔ)額外信息,可以通過(guò)JavaScript訪問(wèn)、修改和在CSS中使用,文章還介紹了高級(jí)用法,如存儲(chǔ)JSON數(shù)據(jù)、事2025-03-11HTML5中下拉框＜select＞標(biāo)簽的屬性和樣式詳解
在HTML5中，下拉框（<select>標(biāo)簽）作為表單的重要組成部分，為用戶提供了一個(gè)從預(yù)定義選項(xiàng)中選擇值的方式,本文將深入探討<select>標(biāo)簽的屬性、樣式，并重點(diǎn)介2025-02-27
本文介紹了HTML5InputDatePicker對(duì)象表示HTML``元素,是HTML5中的新對(duì)象,介紹了日期、周、月份、時(shí)間、日期+時(shí)間、本地日期時(shí)間等不同類型的日期選擇器，感興趣的朋友一起看2025-02-17
本文介紹了HTML5中的超鏈接、相對(duì)路徑和圖片的使用方法,超鏈接可以創(chuàng)建指向另一個(gè)文檔或頁(yè)面內(nèi)部書(shū)簽的鏈接,相對(duì)路徑用于在同一服務(wù)器內(nèi)部跳轉(zhuǎn)頁(yè)面,圖片標(biāo)簽用于引入外部圖2025-02-17- 本文介紹了HTML5超鏈接的創(chuàng)建方法,包括基本語(yǔ)法、創(chuàng)建圖像超鏈接的邊框去除方法以及錨點(diǎn)鏈接的使用,還討論了超鏈接的四種不同狀態(tài)（link、visited、hover、active）的CSS樣2025-02-17
HTML5使用details標(biāo)簽：展開(kāi)/收縮信息
最近看一些技術(shù)網(wǎng)站發(fā)現(xiàn)了details 標(biāo)簽的妙用，這個(gè)不用js即可實(shí)現(xiàn)展開(kāi)/收縮信息，很方便用來(lái)讓用戶先才答案，然后下面點(diǎn)擊再給出答案的效果，這里就為大家簡(jiǎn)單介紹一下，2024-11-03
