闲来无事就画了个这个东西，真的怪丑的，大家看个乐子就好，下面的html文件复制即用
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>可爱小猫绘制</title>
<style>body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; }canvas { border: 1px solid black; }
</style>
</head>
<body>
<canvas id="catCanvas" width=400 height=400></canvas>
<script>const canvas = document.getElementById('catCanvas');const ctx = canvas.getContext('2d');// 设置线条颜色和宽度ctx.strokeStyle = 'black';ctx.lineWidth = 5;// 绘制函数function drawCat() {// 身体setTimeout(() => {ctx.beginPath();ctx.arc(200, 300, 100, 0, Math.PI * 2);ctx.fillStyle = 'gray';ctx.fill();ctx.stroke();}, 1000);// 左耳朵setTimeout(() => {ctx.beginPath();ctx.moveTo(150, 200);ctx.lineTo(170, 150);ctx.lineTo(190, 200);ctx.closePath();ctx.fillStyle = 'gray';ctx.fill();ctx.stroke();}, 2000);// 右耳朵setTimeout(() => {ctx.beginPath();ctx.moveTo(250, 200);ctx.lineTo(230, 150);ctx.lineTo(210, 200);ctx.closePath();ctx.fillStyle = 'gray';ctx.fill();ctx.stroke();}, 3000);// 眼睛setTimeout(() => {ctx.fillStyle = 'white';ctx.beginPath();ctx.arc(180, 250, 15, 0, Math.PI * 2);ctx.fill();ctx.beginPath();ctx.arc(220, 250, 15, 0, Math.PI * 2);ctx.fill();ctx.fillStyle = 'blue';ctx.beginPath();ctx.arc(180, 250, 5, 0, Math.PI * 2);ctx.fill();ctx.beginPath();ctx.arc(220, 250, 5, 0, Math.PI * 2);ctx.fill();}, 4000);// 鼻子setTimeout(() => {ctx.fillStyle = 'pink';ctx.beginPath();ctx.arc(200, 270, 5, 0, Math.PI * 2);ctx.fill();}, 5000);// 嘴巴setTimeout(() => {ctx.beginPath();ctx.moveTo(190, 280);ctx.quadraticCurveTo(200, 290, 210, 280);ctx.stroke();}, 6000);// 胡须setTimeout(() => {ctx.beginPath();ctx.moveTo(170, 260);ctx.lineTo(140, 260);ctx.stroke();ctx.beginPath();ctx.moveTo(230, 260);ctx.lineTo(260, 260);ctx.stroke();}, 7000);// 尾巴setTimeout(() => {ctx.beginPath();ctx.moveTo(300, 300);ctx.bezierCurveTo(350, 250, 350, 350, 300, 400);ctx.stroke();}, 8000);// 四肢setTimeout(() => {ctx.beginPath();ctx.moveTo(150, 350);ctx.lineTo(150, 400);ctx.stroke();ctx.beginPath();ctx.moveTo(250, 350);ctx.lineTo(250, 400);ctx.stroke();ctx.beginPath();ctx.moveTo(170, 350);ctx.lineTo(170, 400);ctx.stroke();ctx.beginPath();ctx.moveTo(230, 350);ctx.lineTo(230, 400);ctx.stroke();}, 9000);// 文字“咪咪”setTimeout(() => {ctx.font = '20px Arial';ctx.fillStyle = 'black';ctx.textAlign = 'center';ctx.fillText('咪咪', 200, 380);}, 10000);}// 开始绘制drawCat();
</script>
</body>
</html>
