用html写一个向日葵花的代码
时间: 2024-01-26 21:03:25 浏览: 24
当然,这是一个简单的HTML代码示例来绘制一个向日葵花:
```html
<!DOCTYPE html>
<html>
<head>
<title>向日葵花</title>
</head>
<body>
<div style="text-align:center;">
<h1>向日葵</h1>
<canvas id="sunflower" width="300" height="300"></canvas>
</div>
<script type="text/javascript">
// 获取画布
var canvas = document.getElementById('sunflower');
var ctx = canvas.getContext('2d');
// 绘制中心
ctx.beginPath();
ctx.arc(150, 150, 20, 0, 2 * Math.PI);
ctx.fillStyle = '#ffcc33';
ctx.fill();
ctx.closePath();
// 绘制花瓣
for(var i=0; i<16; i++) {
ctx.beginPath();
ctx.moveTo(150, 150);
ctx.lineTo(150, 75);
ctx.bezierCurveTo(200, 40, 250, 50, 225, 85);
ctx.lineTo(220, 95);
ctx.bezierCurveTo(200, 70, 175, 65, 165, 90);
ctx.lineTo(160, 100);
ctx.bezierCurveTo(120, 70, 100, 60, 100, 85);
ctx.lineTo(100, 100);
ctx.bezierCurveTo(70, 100, 70, 120, 80, 135);
ctx.lineTo(90, 135);
ctx.bezierCurveTo(75, 155, 75, 175, 90, 200);
ctx.lineTo(100, 205);
ctx.bezierCurveTo(80, 230, 80, 240, 105, 255);
ctx.lineTo(120, 265);
ctx.bezierCurveTo(140, 270, 160, 270, 180, 265);
ctx.lineTo(195, 255);
ctx.bezierCurveTo(220, 240, 220, 230, 200, 205);
ctx.lineTo(190, 200);
ctx.bezierCurveTo(205, 175, 205, 155, 190, 135);
ctx.lineTo(180, 130);
ctx.bezierCurveTo(170, 125, 170, 115, 180, 100);
ctx.lineTo(185, 90);
ctx.bezierCurveTo(195, 70, 220, 70, 240, 95);
ctx.lineTo(245, 105);
ctx.bezierCurveTo(260, 120, 260, 140, 245, 160);
ctx.lineTo(235, 165);
ctx.bezierCurveTo(255, 180, 255, 200, 235, 225);
ctx.lineTo(225, 230);
ctx.bezierCurveTo(240, 245, 240, 265, 225, 285);
ctx.lineTo(210, 295);
ctx.bezierCurveTo(190, 300, 170, 300, 150, 295);
ctx.lineTo(135, 285);
ctx.bezierCurveTo(120, 265, 120, 245, 135, 225);
ctx.lineTo(145, 220);
ctx.bezierCurveTo(125, 200, 125, 180, 145, 160);
ctx.lineTo(155, 155);
ctx.bezierCurveTo(145, 140, 145, 120, 155, 105);
ctx.lineTo(160, 95);
ctx.bezierCurveTo(170, 80, 190, 70, 210, 75);
ctx.lineTo(225, 80);
ctx.bezierCurveTo(220, 65, 200, 55, 180, 60);
ctx.lineTo(165, 65);
ctx.bezierCurveTo(145, 60, 125, 60, 105, 65);
ctx.lineTo(90, 70);
ctx.bezierCurveTo(95, 55, 115, 45, 135, 40);
ctx.fillStyle = '#ffb84d';
ctx.fill();
ctx.closePath();
}
</script>
</body>
</html>
```
如果您将此代码复制并保存为HTML文件,然后在浏览器中打开它,您将会看到一个向日葵花在屏幕的中心。