javaScript+html玫瑰代码
时间: 2024-01-12 11:03:27 浏览: 36
以下是使用HTML和JavaScript创建玫瑰的示例代码:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>Rose</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
<script src="rose.js"></script>
</body>
</html>
```
JavaScript代码(保存为rose.js文件):
```
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// 设置画布背景颜色
ctx.fillStyle = "#FFF8DC";
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 绘制玫瑰
ctx.translate(canvas.width / 2, canvas.height / 2);
var petals = 8; // 瓣数
var angle = Math.PI / petals;
var radius = 100;
var offset = 10;
var color1 = "#FF69B4";
var color2 = "#FFC0CB";
for (var i = 0; i < petals; i++) {
ctx.fillStyle = i % 2 === 0 ? color1 : color2;
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.arc(radius, 0, offset, angle * -1, angle);
ctx.lineTo(0, 0);
ctx.fill();
ctx.rotate(angle);
}
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)