首页canvas写一段代码实现花草

canvas写一段代码实现花草

时间: 2023-11-10 15:54:36 浏览: 79

很高兴为您服务！以下是一个简单的 canvas 代码段，可以实现显示一朵花和一朵草： ``` <!DOCTYPE html> <html> <head> <title>Canvas Example</title> <style> canvas { border: 1px solid black; } </style> </head> <body> <canvas id="myCanvas" width="200" height="200"></canvas> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); //flower ctx.beginPath(); ctx.arc(100, 100, 40, 0, Math.PI*2); ctx.fillStyle = "red"; ctx.fill(); ctx.closePath(); ctx.beginPath(); ctx.arc(80, 80, 20, 0, Math.PI*2); ctx.fillStyle = "yellow"; ctx.fill(); ctx.closePath(); ctx.beginPath(); ctx.arc(100, 80, 20, 0, Math.PI*2); ctx.fillStyle = "yellow"; ctx.fill(); ctx.closePath(); //grass ctx.beginPath(); ctx.moveTo(100, 160); ctx.quadraticCurveTo(80, 140, 60, 160); ctx.quadraticCurveTo(40, 180, 20, 160); ctx.lineTo(20, 180); ctx.lineTo(100, 180); ctx.fillStyle = "green"; ctx.fill(); ctx.closePath(); </script> </body> </html> ``` 请注意，这只是示例代码，您可以自行修改其中的位置、颜色等参数以满足您的需求。希望以上代码能对您有所帮助！

阅读全文