html5 玫瑰花
时间: 2023-08-30 12:06:01 浏览: 219
html5做的玫瑰花
您可以使用 HTML5 的 Canvas 元素来绘制一个简单的玫瑰花。以下是一个示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Rose</title>
<meta charset="UTF-8">
<style type="text/css">
canvas {
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas id="rose" width="200" height="200"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("rose");
var context = canvas.getContext("2d");
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 50;
var petals = 6;
context.beginPath();
context.moveTo(centerX, centerY);
for (var i = 1; i <= petals * 2; i++) {
var angle = i * Math.PI / petals;
var r = radius * Math.sin(angle);
var x = centerX + r * Math.cos(angle);
var y = centerY - r * Math.sin(angle);
context.lineTo(x, y);
}
context.strokeStyle = "#f00";
context.stroke();
</script>
</body>
</html>
```
您可以在浏览器中打开此 HTML 文件,看到绘制的玫瑰花。您可以尝试更改变量 `radius` 和 `petals` 的值,以调整玫瑰花的大小和形状。
阅读全文