HTML的畫布是一個強(qiáng)大的工具，可以通過它來創(chuàng)建所有種類的圖像和形狀。其中，瞇眼笑笑臉是一個簡單但是非常有趣的圖形。下面我們來看一下如何用HTML的畫布來繪制它。 首先，我們需要創(chuàng)建一個畫布元素并指定其寬度和高度。

創(chuàng)建畫布元素：

<canvas id="myCanvas" width="200" height="200"></canvas>

接著，我們需要獲取畫布的上下文并設(shè)置顏色、線條寬度等屬性。

獲取畫布上下文：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

設(shè)置屬性：

ctx.fillStyle = "yellow";
ctx.strokeStyle = "black";
ctx.lineWidth = 2;

接下來，我們可以開始繪制瞇眼笑笑臉了。要繪制這個圖形，需要用到arc()函數(shù)來繪制圓形。

繪制眼睛：

ctx.beginPath();
ctx.arc(70, 75, 10, 0, Math.PI*2);
ctx.stroke();
ctx.fill();
ctx.beginPath();
ctx.arc(130, 75, 10, 0, Math.PI*2);
ctx.stroke();
ctx.fill();

繪制嘴巴：

ctx.beginPath();
ctx.arc(100, 120, 40, 0.25*Math.PI, 0.75*Math.PI, false);
ctx.stroke();

最后，我們就能看到這個可愛的瞇眼笑笑臉了。 完整代碼如下：

<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "yellow";
ctx.strokeStyle = "black";
ctx.lineWidth = 2;
ctx.beginPath();
ctx.arc(70, 75, 10, 0, Math.PI*2);
ctx.stroke();
ctx.fill();
ctx.beginPath();
ctx.arc(130, 75, 10, 0, Math.PI*2);
ctx.stroke();
ctx.fill();
ctx.beginPath();
ctx.arc(100, 120, 40, 0.25*Math.PI, 0.75*Math.PI, false);
ctx.stroke();
</script>