来个玫瑰的html代码
时间: 2023-11-29 10:46:15 浏览: 30
以下是一个简单的HTML5 canvas实现的玫瑰花代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>Canvas Rose</title>
<meta charset="utf-8">
<style type="text/css">
canvas {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<canvas id="rose" width="400" height="400"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("rose");
var ctx = canvas.getContext("2d");
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var petals = 8;
var radius = 100;
var angle = 0;
ctx.beginPath();
ctx.moveTo(centerX, centerY);
for (var i = 0; i < petals * 2; i++) {
radius = i % 2 === 0 ? 100 : 50;
angle = i * Math.PI / petals;
var x = centerX + (radius * Math.sin(angle));
var y = centerY + (radius * Math.cos(angle));
ctx.lineTo(x, y);
}
ctx.fillStyle = "pink";
ctx.fill();
</script>
</body>
</html>
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)