当前位置：首页 > JavaScript

js实现玫瑰

2026-02-01 03:19:58JavaScript

使用Canvas绘制玫瑰曲线

在JavaScript中，可以通过Canvas绘制玫瑰曲线（Rose Curve）。玫瑰曲线是极坐标下的一种数学曲线，方程为 \( r = a \cdot \cos(k \theta) \) 或 \( r = a \cdot \sin(k \theta) \)。

js实现玫瑰

const canvas = document.createElement('canvas');
canvas.width = 400;
canvas.height = 400;
document.body.appendChild(canvas);

const ctx = canvas.getContext('2d');
ctx.translate(canvas.width / 2, canvas.height / 2);

function drawRose(k, a, color) {
    ctx.beginPath();
    for (let theta = 0; theta < Math.PI * 2; theta += 0.01) {
        const r = a * Math.cos(k * theta);
        const x = r * Math.cos(theta) * 50;
        const y = r * Math.sin(theta) * 50;
        if (theta === 0) {
            ctx.moveTo(x, y);
        } else {
            ctx.lineTo(x, y);
        }
    }
    ctx.strokeStyle = color;
    ctx.stroke();
}

drawRose(5, 1, 'red');

参数说明

\( k \)：控制花瓣的数量和形状。若为整数，表示花瓣数；若为分数，形状更复杂。
\( a \)：控制曲线的大小。
调整 theta 的步长（如 0.01）可改变曲线的平滑度。

动态生成玫瑰

通过动画循环动态改变参数，可生成动态玫瑰效果：

js实现玫瑰

let angle = 0;
function animate() {
    ctx.clearRect(-200, -200, 400, 400);
    drawRose(5, Math.sin(angle) * 2 + 3, 'red');
    angle += 0.05;
    requestAnimationFrame(animate);
}
animate();

使用SVG绘制玫瑰

SVG也可实现玫瑰曲线，适合矢量图形场景：

<svg width="400" height="400" viewBox="-200 -200 400 400">
    <path id="rose" fill="none" stroke="blue" stroke-width="1"/>
</svg>

<script>
    const svgPath = document.getElementById('rose');
    let pathData = '';
    const k = 3, a = 100;
    for (let theta = 0; theta < Math.PI * 8; theta += 0.05) {
        const r = a * Math.sin(k * theta);
        const x = r * Math.cos(theta);
        const y = r * Math.sin(theta);
        pathData += (theta === 0 ? 'M' : 'L') + x + ' ' + y + ' ';
    }
    svgPath.setAttribute('d', pathData);
</script>