HTML5是最新的HTML標準，它在繼承HTML4的基礎上，添加了許多新的功能，其中包括繪圖功能。下面是一份HTML5畫豬頭的代碼示例：
<!DOCTYPE html>
<html>
<head>
<title>HTML5畫豬頭</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
//畫嘴巴
ctx.beginPath();
ctx.arc(250, 250, 150, 0.2 * Math.PI, 0.8 * Math.PI);
ctx.fillStyle = "pink";
ctx.fill();
//畫鼻子
ctx.beginPath();
ctx.arc(250, 250, 100, 0, 2 * Math.PI);
ctx.fillStyle = "pink";
ctx.fill();
//畫眼睛
ctx.beginPath();
ctx.arc(200, 200, 50, 0, 2 * Math.PI);
ctx.fillStyle = "white";
ctx.fill();
ctx.beginPath();
ctx.arc(300, 200, 50, 0, 2 * Math.PI);
ctx.fillStyle = "white";
ctx.fill();
ctx.beginPath();
ctx.arc(200, 200, 20, 0, 2 * Math.PI);
ctx.fillStyle = "black";
ctx.fill();
ctx.beginPath();
ctx.arc(300, 200, 20, 0, 2 * Math.PI);
ctx.fillStyle = "black";
ctx.fill();
//畫耳朵
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.quadraticCurveTo(200, 50, 300, 100);
ctx.fillStyle = "pink";
ctx.fill();
ctx.beginPath();
ctx.moveTo(400, 100);
ctx.quadraticCurveTo(300, 50, 200, 100);
ctx.fillStyle = "pink";
ctx.fill();
</script>
</body>
</html>代碼中使用了HTML5中的Canvas元素和getContext()方法，實現了在網頁中繪制出一個可愛的豬頭。通過設置圓形的半徑、位置、填充色等屬性，我們可以繪制出豬頭的嘴巴、鼻子、眼睛和耳朵。在實際開發中，我們可以使用JavaScript動態修改Canvas的屬性，實現更加靈活的效果。
上一篇html5留言表單代碼
下一篇html5界面源代碼