当前位置：首页 > JavaScript

js实现玫瑰

2026-04-05 19:42:49JavaScript

以下是使用JavaScript绘制玫瑰图案的几种方法，结合数学公式和Canvas绘图实现：

极坐标玫瑰曲线

玫瑰曲线（Rose Curve）的极坐标方程为： $ r = a \cdot \cos(k\theta) $ 或 $ r = a \cdot \sin(k\theta) $ 其中$k$控制花瓣数量，$a$控制大小。

const canvas = document.createElement('canvas');
document.body.appendChild(canvas);
const ctx = canvas.getContext('2d');
canvas.width = 400;
canvas.height = 400;

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 = 200 + r * Math.cos(theta) * 20;
    const y = 200 + r * Math.sin(theta) * 20;
    ctx.lineTo(x, y);
  }
  ctx.closePath();
  ctx.fillStyle = color;
  ctx.fill();
}

drawRose(5, 1, 'pink'); // 5瓣玫瑰

参数方程实现

使用参数方程生成更复杂的玫瑰形态： $ x = \sin(\theta) \cdot \cos(\theta) \cdot \log(\theta) $ $ y = \theta \cdot \cos(\theta) $

ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
for (let theta = 0.1; theta < 20; theta += 0.1) {
  const x = 200 + Math.sin(theta) * Math.cos(theta) * Math.log(theta) * 30;
  const y = 200 + theta * Math.cos(theta) * 3;
  ctx.lineTo(x, y);
}
ctx.strokeStyle = 'red';
ctx.stroke();

使用三次贝塞尔曲线

通过贝塞尔曲线手动构建玫瑰花瓣：

function drawPetal(x, y, size, angle) {
  ctx.save();
  ctx.translate(x, y);
  ctx.rotate(angle);

  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.bezierCurveTo(
    size * 0.5, size * 0.2,
    size * 0.8, size * 0.5,
    size * 0.4, size * 1
  );
  ctx.bezierCurveTo(
    size * 0.2, size * 0.8,
    size * 0.1, size * 0.5,
    0, 0
  );
  ctx.fillStyle = 'rgba(255,100,100,0.7)';
  ctx.fill();

  ctx.restore();
}

// 绘制多个花瓣组成玫瑰
for (let i = 0; i < 8; i++) {
  drawPetal(200, 200, 80, Math.PI * 2 / 8 * i);
}

SVG路径生成

生成SVG格式的玫瑰路径：

function generateSVGRose(petals) {
  let path = '';
  const a = 50;

  for (let theta = 0; theta < Math.PI * 2; theta += 0.01) {
    const r = a * Math.cos(petals * theta);
    const x = 100 + r * Math.cos(theta);
    const y = 100 + r * Math.sin(theta);
    path += (theta === 0 ? 'M' : 'L') + x + ',' + y;
  }

  return `<svg width="200" height="200">
    <path d="${path}z" fill="coral"/>
  </svg>`;
}

document.body.innerHTML += generateSVGRose(7);

以上方法可根据需要调整参数：

js实现玫瑰