HTML畫布是一個(gè)能夠讓網(wǎng)頁(yè)上繪制圖形的標(biāo)簽，常常被應(yīng)用在一些交互性比較強(qiáng)的網(wǎng)頁(yè)上。而今天我們所要談?wù)摰脑掝}，則是使用HTML畫布來(lái)繪制一個(gè)小火柴人的代碼。 首先我們需要知道的是，HTML畫布是不支持直接繪制圖形的。我們需要借助于JavaScript來(lái)實(shí)現(xiàn)這個(gè)功能。代碼如下：

<canvas id="myCanvas"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
//繪制頭部
context.beginPath();
context.arc(100, 50, 20, 0, Math.PI * 2);
context.stroke();
//繪制身體
context.beginPath();
context.moveTo(100, 70);
context.lineTo(100, 120);
context.stroke();
//繪制左腿
context.beginPath();
context.moveTo(100, 120);
context.lineTo(80, 150);
context.stroke();
//繪制右腿
context.beginPath();
context.moveTo(100, 120);
context.lineTo(120, 150);
context.stroke();
//繪制左手
context.beginPath();
context.moveTo(100, 80);
context.lineTo(80, 100);
context.stroke();
//繪制右手
context.beginPath();
context.moveTo(100, 80);
context.lineTo(120, 100);
context.stroke();
</script>

在上面的代碼中，我們使用了canvas.getContext("2d")來(lái)獲取了一個(gè)canvas的上下文對(duì)象，方便我們進(jìn)行繪制。接著，我們就可以通過(guò)一系列的context.beginPath()和context.lineTo()方法來(lái)實(shí)現(xiàn)火柴人的繪制。其中，context.arc()方法是用來(lái)繪制圓形的。這些繪制方法和參數(shù)的用法，可以參考一下MDN上的官方文檔，這里就不多加贅述了。 最終，我們就可以獲得一個(gè)非常簡(jiǎn)單的、不過(guò)還算是合格的小火柴人了。如果有對(duì)HTML畫布有一定了解的朋友，可以自行進(jìn)行修改和擴(kuò)展，讓這個(gè)小火柴人更加生動(dòng)有趣。