首頁 >web前端 >H5教程 >html5 Canvas實作畫直線與設定線條的樣式

html5 Canvas實作畫直線與設定線條的樣式

不言原創: 2018-06-22 15:19:352944瀏覽

這篇文章主要介紹了關於html5 Canvas實現畫直線與設定線條的樣式，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

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

var cvs = document.getElementById(&#39;cvs&#39;); //画布 
var ctx = cvs.getContext(&#39;2d&#39;); // 画笔

我們畫畫的時候，落筆點是不固定的，隨時都會改變。 canvas雖然不是透過手來決定落筆點，但也有一個方法,就是moveTo。 moveTo的作用相當於把筆尖提離畫布，然後移動到指定的點（即座標）。

ctx.moveTo(x,y)

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

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

此時你刷新網頁，會發現畫布上沒有預想中的線，什麼都沒有。因為我們還少了一個步驟.lineTo其實是畫的一條“路徑”，本身是不可見的。如果要讓他顯示出來，我們必須對他進行「畫」的操作。
用過PS的同學，一定能知道圖形的兩種模式，一種是填充，另一種是描邊。現在我們已經畫了一條線，相當於PS中勾了一條路徑，此時給路徑描一下邊，就能顯示出圖形了。
canvas描邊的方法是stroke().現在讓我們補全程式碼：

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

ctx.stroke();此時刷新，就能看到一條線了。當然，你也可以連續繪製出幾百條路徑，再執行描邊動作，即可一下畫出幾百條線。現在我們來用4條線畫一個矩形：

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

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

ctx.lineWidth = 10; 
ctx.strokeStyle = &#39;rgba(255,0,0,0.5)&#39;;

上面的程式碼把線條寬度設定成10px，線條顏色變成了半透明的紅色。

如圖1，刷新一下，好像有點不對！怎麼左上角缺了一小塊似得？這不是錯覺。原因嘛要從canvas的線條繪製方式說起。
問題：如果我畫的矩形路徑是寬高都是100，此時我的邊線寬度是10px，那麼這個描了邊的矩形整體寬高是多少？是100 10*2=120嗎？
如果邊線是完全描繪在路徑外側的話，那就是120。但Canvas不是。 Canvas中的線條都有一條“中線”，這條中線位於line的絕對中間，線條的筆畫以中線向兩側擴展。例如你的線條寬度是1，那麼中線就在0.5的位置；寬度是5，那麼中線就是在2.5。 canvas的圖形在描邊的時候，都是路徑與line的中線貼合，然後描邊。如圖2：

html5 Canvas實作畫直線與設定線條的樣式

所以，描邊的時候線的一半在外側，一半在內側，即上面的矩形的整體寬度是100 (10/ 2)*2，等於110.
也正是因為這個原因，左上角出現缺角就理所當然了。因為這裡沒人畫。
但為什麼其餘的角落沒有出現缺口呢？看你的圖不是4個角落都有缺口嗎？
那是因為，我畫線的過程中沒有把畫筆“提起來”，畫筆是連續的，即沒有moveTo過。不信我們現在來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 = &#39;rgba(255,0,0,0.5)&#39;; 
ctx.stroke();

我們再畫第二條線之前moveTo了一下，而且moveTo連座標都沒變，還是那個點，但刷新後圖形變成了這個樣子[圖3 ]：

明白了？因为我们把笔提起来了。
现在我们删掉moveTo，不要纠结他了，我们来思考一下如何把左上角那个缺角给补上？
首先问个问题，我们的路径闭合了吗？这不是废话么，我们不是已经把路径绕回原点了么？当然算是闭合了！
错！这样只是让路径最后一个点和起点重合了而已，路径本身却没有闭合！
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 = &#39;rgba(255,0,0,0.5)&#39;; 
ctx.stroke();

此时刷新，就是一个完美的正方形了。图4：

无论我们把线条改到多粗————越粗越有人喜欢是吧？————这个四方形的四个角都是规矩的直角，不会出现圆滑的情况。圆滑的角是什么情况？请看PS中的四方形描边，图5：

看到了吧，越粗的边线，他的角的圆弧越大。
如果我想Canvas里面的边线也和PS这种一样，有没有办法呢？当然有，就是lineJoin属性。
lineJoin，意思即线的交汇处，有3个属性：miter(默认，尖角)，bevel（斜角）,round（圆角），如图6：

毫无疑问我们一下就能明白我们的矩形用的是尖角，所以试着把他改成圆角看看：
图形变成了这样，图7：

有点像PS的了吧？
另外，通过前面图我们了解到，Canvas的线条两端是平的，可不可以改呢？毕竟平的不好看。
也是可以的，即lineCap属性，这个就是定义线条的端点。lineCap有3个值：butt（平，默认）,round（圆）,square（方），如图8

看图就能发现，其实平头跟方头是一样的，区别只是平头没有伸出去那么一截。圆头和方头都会伸出去一截，这一节是多长呢？就是线条宽度的一半。
你有没有想到什么？哈哈，前面的闭合路径的问题，如果我们把lineCap设为方头，效果也是一样的！
但为了保险起见，我们还是要把路径闭合了，切记！
我还要提醒一下：闭合的路径没有端点！所以闭合的路径上看不到端点的样式。
另外：lineCap与lineJoin有点相似，注意不要搞混。
如果你眼尖并且运气不好，你可能会发现有时候1像素的线条不是1像素宽，好像要宽一些，模糊一些。如图9：

恭喜你!你遇到了一个不是bug的bug。这个很特别，我把他放到下一篇文章讲吧

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

html5 Canvas實作畫直線與設定線條的樣式

相關文章