首页用canvas画静态花瓣

用canvas画静态花瓣

时间: 2023-08-03 21:19:37 浏览: 161

好的，以下是用canvas画静态花瓣的示例代码： ```html <!DOCTYPE html> <html> <head> <title>Canvas Flower Petals</title> <meta charset="utf-8"> <style> canvas { border: 1px solid black; } </style> </head> <body> <canvas id="flower" width="400" height="400"></canvas> <script> const canvas = document.getElementById('flower'); const context = canvas.getContext('2d'); // 花瓣颜色 const petalColor = '#FFC0CB'; // 绘制花瓣 function drawPetal(x, y, radius, angle) { context.beginPath(); context.moveTo(x, y); context.arc(x, y - radius / 2, radius / 2, angle, angle + Math.PI, false); context.arc(x, y + radius / 2, radius / 2, angle + Math.PI, angle + 2 * Math.PI, false); context.closePath(); context.fillStyle = petalColor; context.fill(); } // 绘制花朵 function drawFlower(x, y, radius, numPetals) { const angleIncrement = (2 * Math.PI) / numPetals; for (let i = 0; i < numPetals; i++) { drawPetal(x, y, radius, i * angleIncrement); } } // 绘制花朵 drawFlower(200, 200, 100, 8); </script> </body> </html> ``` 运行以上代码，即可在浏览器中看到一个有8朵花瓣的花。如果需要更多的花瓣，可以调整`numPetals`参数的值。如果需要改变花瓣颜色，可以修改`petalColor`变量的值。

阅读全文