HTML5小動物代碼
HTML5技術為網頁開發帶來了一些很有趣的特性。比如說，我們可以使用HTML5 canvas繪制出很多有趣的小動物形象。以下是一個簡單的HTML5小動物代碼的示例：
<!DOCTYPE html>
<html>
<head>
<title>HTML5小動物代碼</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// 畫出一個三角形作為狗的臉
ctx.beginPath();
ctx.moveTo(150, 150);
ctx.lineTo(250, 150);
ctx.lineTo(200, 50);
ctx.closePath();
ctx.fillStyle = "brown";
ctx.fill();
// 畫出兩只眼睛
ctx.beginPath();
ctx.arc(175, 125, 10, 0, Math.PI*2, false);
ctx.arc(225, 125, 10, 0, Math.PI*2, false);
ctx.fillStyle = "white";
ctx.fill();
ctx.beginPath();
ctx.arc(175, 125, 5, 0, Math.PI*2, false);
ctx.arc(225, 125, 5, 0, Math.PI*2, false);
ctx.fillStyle = "black";
ctx.fill();
// 畫出鼻子和嘴巴
ctx.beginPath();
ctx.moveTo(200, 135);
ctx.lineTo(200, 155);
ctx.strokeStyle = "black";
ctx.stroke();
ctx.beginPath();
ctx.arc(200, 140, 5, 0, Math.PI, false);
ctx.strokeStyle = "black";
ctx.stroke();
// 畫出兩只耳朵
ctx.beginPath();
ctx.moveTo(150, 150);
ctx.lineTo(120, 100);
ctx.lineTo(170, 100);
ctx.closePath();
ctx.fillStyle = "brown";
ctx.fill();
ctx.beginPath();
ctx.moveTo(250, 150);
ctx.lineTo(280, 100);
ctx.lineTo(230, 100);
ctx.closePath();
ctx.fillStyle = "brown";
ctx.fill();
</script>
</body>
</html>