首页使用canvas绘制一个小人图标

使用canvas绘制一个小人图标

时间: 2024-01-24 10:04:30 浏览: 107

好的，以下是一个使用 Canvas 绘制小人的示例代码： ```html <!DOCTYPE html> <html> <head> <title>Canvas绘制小人</title> <style> canvas { border: 1px solid #ccc; } </style> </head> <body> <canvas id="canvas" width="100" height="100"></canvas> <script> var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var x = canvas.width / 2; var y = canvas.height / 2; // 绘制头部 ctx.beginPath(); ctx.arc(x, y - 30, 20, 0, 2 * Math.PI); ctx.fillStyle = '#F7DC6F'; ctx.fill(); // 绘制身体 ctx.beginPath(); ctx.rect(x - 20, y - 10, 40, 50); ctx.fillStyle = '#3498DB'; ctx.fill(); // 绘制左手 ctx.beginPath(); ctx.moveTo(x - 20, y + 10); ctx.lineTo(x - 40, y + 20); ctx.strokeStyle = '#F5B041'; ctx.lineWidth = 5; ctx.stroke(); // 绘制右手 ctx.beginPath(); ctx.moveTo(x + 20, y + 10); ctx.lineTo(x + 40, y + 20); ctx.stroke(); // 绘制左脚 ctx.beginPath(); ctx.moveTo(x - 10, y + 60); ctx.lineTo(x - 30, y + 80); ctx.strokeStyle = '#E74C3C'; ctx.stroke(); // 绘制右脚 ctx.beginPath(); ctx.moveTo(x + 10, y + 60); ctx.lineTo(x + 30, y + 80); ctx.stroke(); </script> </body> </html> ``` 运行代码可以看到绘制的小人图标，代码中使用了 Canvas 绘制图形的基本操作，包括绘制圆形、矩形、线条等。

阅读全文