HTML畫布是一個非常有趣的功能，通過它我們可以使用JavaScript來繪制出很多有趣的圖形，比如我們今天要說的笑臉圖案。

<canvas id="smile" width="200" height="200"></canvas>
<script>
var canvas = document.getElementById("smile");
var ctx = canvas.getContext("2d");
// 繪制圓形
function drawCircle(x, y, radius) {
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI*2, false);
ctx.closePath();
ctx.fillStyle = "yellow";
ctx.fill();
}
// 繪制眼睛
function drawEyes(x, y) {
drawCircle(x - 30, y - 30, 10);
drawCircle(x + 30, y - 30, 10);
}
// 繪制嘴巴
function drawMouth(x, y) {
ctx.beginPath();
ctx.arc(x, y + 30, 60, 0.2*Math.PI, 0.8*Math.PI, false);
ctx.lineWidth = 10;
ctx.strokeStyle = "black";
ctx.stroke();
}
// 繪制笑臉
function drawSmile() {
drawCircle(100, 100, 80);  // 繪制臉
drawEyes(100, 100);  // 繪制眼睛
drawMouth(100, 100);  // 繪制嘴巴
}
drawSmile();
</script>

代碼中首先創建了一個寬度為200，高度為200的canvas元素，然后在JavaScript中獲取到它并獲取到它的2D上下文。接著使用三個函數，分別繪制了圓形、眼睛和嘴巴，最后在一個名為drawSmile的函數中調用這些函數，并傳入笑臉的中心坐標。通過這樣的一些簡單操作，便繪制出了一個非常可愛的笑臉圖案。如果您對于繪制圖形有興趣，不妨自己動手試試看吧。