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的函数中调用这些函数，并传入笑脸的中心坐标。通过这样的一些简单操作，便绘制出了一个非常可爱的笑脸图案。如果您对于绘制图形有兴趣，不妨自己动手试试看吧。