HTML畫布是一項強大的技術，能夠在網頁上實現各種有趣的交互式功能。其中，繪制圖形就是最常見的一種應用。而下面這個例子，是用HTML畫布繪制一個可愛的豬頭的代碼：

<canvas id="pig" width="200" height="200"></canvas>
<script>
var c = document.getElementById("pig");
var ctx = c.getContext("2d");
// 繪制頭部
ctx.beginPath();
ctx.arc(100, 100, 80, 0, Math.PI * 2, true);
ctx.fillStyle = "#ffc0cb";
ctx.fill();
ctx.closePath();
// 繪制耳朵
ctx.beginPath();
ctx.arc(45, 80, 30, 0, Math.PI * 2, true);
ctx.arc(155, 80, 30, 0, Math.PI * 2, true);
ctx.fillStyle = "#ffc0cb";
ctx.fill();
ctx.closePath();
// 繪制眼睛
ctx.beginPath();
ctx.arc(60, 100, 15, 0, Math.PI * 2, true);
ctx.fillStyle = "#ffffff";
ctx.fill();
ctx.beginPath();
ctx.arc(140, 100, 15, 0, Math.PI * 2, true);
ctx.fill();
// 繪制瞳孔
ctx.beginPath();
ctx.arc(60, 100, 5, 0, Math.PI * 2, true);
ctx.fillStyle = "#000000";
ctx.fill();
ctx.beginPath();
ctx.arc(140, 100, 5, 0, Math.PI * 2, true);
ctx.fill();
// 繪制鼻子
ctx.beginPath();
ctx.arc(100, 130, 25, 0, Math.PI * 2, true);
ctx.fillStyle = "#ff69b4";
ctx.fill();
// 繪制嘴巴
ctx.beginPath();
ctx.moveTo(75, 150);
ctx.quadraticCurveTo(100, 145, 125, 150);
ctx.closePath();
ctx.fillStyle = "#ff69b4";
ctx.fill();
</script>

代碼中使用了HTML5的<canvas>標簽創建了一個名為pig的畫布，然后調用了getContext("2d")方法獲取了2D圖形上下文對象。之后，就按照豬頭的輪廓和部位位置繪制了各個圖形。比如頭部使用了arc方法繪制圓形，耳朵使用了兩個arc方法繪制兩個圓形，眼睛、瞳孔、鼻子、嘴巴則使用了不同的路徑和封閉曲線組合繪制。

最后，給這些圖形填充上不同的顏色，就完成了一個可愛的豬頭圖案。你可以在網頁中顯示這個畫布，也可以將其保存為圖片使用。