HTML绘制一朵玫瑰

最新推荐文章于 2024-12-05 14:56:26 发布

Magiclotus_yun

最新推荐文章于 2024-12-05 14:56:26 发布

阅读量795

点赞数 3

CC 4.0 BY-SA版权

文章标签： html 前端

本文链接：https://blog.youkuaiyun.com/Magiclotus_yun/article/details/144056355

代码由Kimi智能助手生成。

具体代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>绘制玫瑰</title>
<style>
canvas {
border: 1px solid black; /* 给画布添加边框 */
}
</style>
</head>
<body>
<canvas id="roseCanvas" width="200" height="200"></canvas>
<script>
const canvas = document.getElementById('roseCanvas');
const ctx = canvas.getContext('2d');

// 设置颜色
ctx.fillStyle = 'orange';

// 绘制玫瑰的花瓣
for (let i = 0; i < 8; i++) {
ctx.beginPath();
ctx.moveTo(100, 100); // 移动到中心点
ctx.bezierCurveTo(
100 - 20 * Math.cos((i * 45) * Math.PI / 180),
100 - 20 * Math.sin((i * 45) * Math.PI / 180),
100 - 40 * Math.cos((i * 45 + 22.5) * Math.PI / 180),
100 - 40 * Math.sin((i * 45 + 22.5) * Math.PI / 180),
100 + 20 * Math.cos((i * 45 + 45) * Math.PI / 180),
100 + 20 * Math.sin((i * 45 + 45) * Math.PI / 180)
);
ctx.fill();
}

// 绘制玫瑰的叶子
ctx.fillStyle = 'green';
for (let i = 0; i < 3; i++) {
ctx.beginPath();
ctx.moveTo(100, 140); // 移动到叶子的起始点
ctx.quadraticCurveTo(
100 - 10 * Math.cos((i * 120 - 60) * Math.PI / 180),
140 - 10 * Math.sin((i * 120 - 60) * Math.PI / 180),
100 + 10 * Math.cos((i * 120) * Math.PI / 180),
140 - 10 * Math.sin((i * 120) * Math.PI / 180)
);
ctx.fill();
}

// 绘制玫瑰的刺
ctx.fillStyle = 'brown';
for (let i = 0; i < 5; i++) {
ctx.beginPath();
ctx.moveTo(100, 120); // 移动到刺的起始点
ctx.lineTo(
100 + 5 * Math.cos((i * 72) * Math.PI / 180),
120 - 5 * Math.sin((i * 72) * Math.PI / 180)
);
ctx.fill();
}
</script>
</body>
</html>