HTML畫熊貓代碼
//HTML畫熊貓代碼
<!DOCTYPE html>
<html>
<head>
<title>HTML畫熊貓代碼</title>
</head>
<body>
<canvas id="panda" width="300" height="300"></canvas>
<script>
var canvas = document.getElementById("panda");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "white";
ctx.beginPath();
ctx.arc(150, 150, 140, 0, Math.PI * 2);
ctx.fill();
ctx.fillStyle = "black"; //眼睛
ctx.beginPath();
ctx.arc(95, 95, 25, 0, Math.PI * 2);
ctx.fill();
ctx.beginPath();
ctx.arc(205, 95, 25, 0, Math.PI * 2);
ctx.fill();
ctx.fillStyle = "black"; //鼻子
ctx.beginPath();
ctx.arc(150, 150, 35, 0, Math.PI * 2);
ctx.fill();
ctx.fillStyle = "white"; //耳朵底色
ctx.beginPath();
ctx.arc(50, 65, 30, 0, Math.PI * 2);
ctx.fill();
ctx.beginPath();
ctx.arc(250, 65, 30, 0, Math.PI * 2);
ctx.fill();
ctx.fillStyle = "black"; //眉毛
ctx.beginPath();
ctx.moveTo(70, 110);
ctx.quadraticCurveTo(95, 80, 120, 110);
ctx.moveTo(180, 110);
ctx.quadraticCurveTo(205, 80, 230, 110);
ctx.stroke();
ctx.fillStyle = "black"; //口紅
ctx.beginPath();
ctx.moveTo(110, 185);
ctx.quadraticCurveTo(150, 210, 190, 185);
ctx.stroke();
ctx.fillStyle = "black"; //腮紅
ctx.beginPath();
ctx.arc(95, 165, 20, 0, Math.PI * 2);
ctx.fill();
ctx.beginPath();
ctx.arc(205, 165, 20, 0, Math.PI * 2);
ctx.fill();
</script>
</body>
</html>以上是用HTML代碼寫出的熊貓圖畫，通過canvas標簽向用戶展示了一個熊貓眼眶、鼻子、耳朵、口紅、腮紅，非常逼真，也非常可愛，代碼和效果如上所示。