HTML5 畫(huà)布提供了一個(gè)非常有趣的功能：繪制圖形， 繪制文本以及繪制圖像。 對(duì)于繪制圖形，一個(gè)重要的工具就是筆刷。這篇文章將介紹HTML5畫(huà)布的筆刷代碼。 筆刷可以繪制不同形狀和線(xiàn)條，這取決于筆刷的樣式和大小。HTML5畫(huà)布提供了不同的筆刷樣式，比如實(shí)線(xiàn)、虛線(xiàn)和點(diǎn)線(xiàn)等等。筆刷的大小可以調(diào)整。 下面是一些簡(jiǎn)單的HTML5畫(huà)布筆刷代碼：

<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// 實(shí)線(xiàn)筆刷
ctx.beginPath();
ctx.lineWidth = 10;
ctx.strokeStyle = "blue";
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.stroke();
// 虛線(xiàn)筆刷
ctx.beginPath();
ctx.setLineDash([10, 5]);
ctx.strokeStyle = "red";
ctx.moveTo(150, 50);
ctx.lineTo(200, 100);
ctx.stroke();
// 點(diǎn)線(xiàn)筆刷
ctx.beginPath();
ctx.setLineDash([2, 2]);
ctx.strokeStyle = "green";
ctx.moveTo(250, 50);
ctx.lineTo(300, 100);
ctx.stroke();
// 橡皮擦
ctx.beginPath();
ctx.strokeStyle = "white";
ctx.lineCap = "round";
ctx.lineWidth = 20;
ctx.moveTo(400, 50);
ctx.lineTo(450, 100);
ctx.stroke();
</script>

以上代碼展示了一些常見(jiàn)的筆刷樣式。ctx.lineWidth屬性用于設(shè)置筆刷的大小，ctx.strokeStyle屬性用于設(shè)置筆刷的顏色。ctx.lineCap屬性用于設(shè)置筆刷端點(diǎn)的形狀，可以選取“butt”、“round”和“square”。 ctx.setLineDash()方法用于設(shè)置線(xiàn)條的樣式。在括號(hào)中，第一個(gè)數(shù)字表示線(xiàn)條的長(zhǎng)度，第二個(gè)數(shù)字表示間距的長(zhǎng)度。例如[10, 5]表示線(xiàn)條長(zhǎng)10像素，間距長(zhǎng)5像素。 最后一個(gè)筆刷樣式是橡皮擦。為了繪制橡皮擦樣式，可以將strokeStyle屬性設(shè)置為“white”。這樣，線(xiàn)條將繪制為白色，看起來(lái)就像是橡皮擦。 通過(guò)使用這些筆刷樣式，可以創(chuàng)造多樣化的繪畫(huà)效果，如下圖所示：  以上就是HTML5畫(huà)布筆刷的一些基礎(chǔ)代碼。當(dāng)然，還有很多其他的筆刷樣式和屬性可以探索。如果您正在學(xué)習(xí)HTML5畫(huà)布，建議多試一些這些筆刷效果代碼，體驗(yàn)筆刷帶來(lái)的自由和樂(lè)趣。