首页html canvas 画一只小猫

html canvas 画一只小猫

时间: 2023-10-21 19:23:55 浏览: 225

好的，以下是一个简单的 HTML Canvas 代码示例，它可以画一只小猫： ```html <!DOCTYPE html> <html> <head> <title>HTML Canvas 画小猫</title> </head> <body> <canvas id="myCanvas" width="400" height="400"></canvas> <script> // 获取 Canvas 元素 var canvas = document.getElementById("myCanvas"); // 获取 2D 绘图上下文 var ctx = canvas.getContext("2d"); // 设置小猫的颜色 ctx.fillStyle = "orange"; // 画头部 ctx.beginPath(); ctx.arc(200, 100, 50, 0, Math.PI * 2); ctx.fill(); // 画身体 ctx.beginPath(); ctx.arc(200, 250, 100, 0, Math.PI * 2); ctx.fill(); // 画耳朵 ctx.beginPath(); ctx.moveTo(150, 60); ctx.lineTo(200, 20); ctx.lineTo(250, 60); ctx.fill(); // 画眼睛 ctx.fillStyle = "white"; ctx.beginPath(); ctx.arc(180, 90, 10, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(220, 90, 10, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = "black"; ctx.beginPath(); ctx.arc(180, 90, 5, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(220, 90, 5, 0, Math.PI * 2); ctx.fill(); // 画嘴巴 ctx.beginPath(); ctx.moveTo(180, 120); ctx.quadraticCurveTo(200, 130, 220, 120); ctx.stroke(); // 画鼻子 ctx.fillStyle = "pink"; ctx.beginPath(); ctx.arc(200, 110, 8, 0, Math.PI * 2); ctx.fill(); // 画爪子 ctx.beginPath(); ctx.moveTo(150, 280); ctx.lineTo(150, 320); ctx.lineTo(170, 320); ctx.lineTo(170, 280); ctx.fill(); ctx.beginPath(); ctx.moveTo(250, 280); ctx.lineTo(250, 320); ctx.lineTo(230, 320); ctx.lineTo(230, 280); ctx.fill(); </script> </body> </html> ``` 这个例子中，我们使用 Canvas API 来绘制小猫的各个部分，包括头部、身体、耳朵、眼睛、嘴巴、鼻子和爪子。注意，这只是一个简单的例子，实际上你可以根据需要进一步优化和改进它。

阅读全文