JavaScript玫瑰花代码

以下是一段 JavaScript 代码，可以在网页上绘制出一个玫瑰花。

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');

// 调整画布大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 设置画布原点在页面中心
ctx.translate(canvas.width / 2, canvas.height / 2);

// 绘制玫瑰花
ctx.strokeStyle = 'red';
ctx.lineWidth = 2;

for (var angle = 0; angle < Math.PI * 2; angle += 0.01) {
  var x = 5 * Math.pow(Math.sin(angle), 3);
  var y = -5 * (13 * Math.cos(angle) - 5 * Math.cos(2 * angle) - 2 * Math.cos(3 * angle) - Math.cos(4 * angle)) / 16;
  ctx.lineTo(x, y);
}

ctx.stroke();

解释一下代码的具体实现：

1. 首先获取画布元素和绘图上下文对象。
2. 调整画布大小为窗口大小。
3. 将画布原点移到页面中心。
4. 设置绘图样式，包括颜色和线宽。
5. 循环绘制每个角度对应的点，计算出其 x 和 y 坐标。
6. 将点连成线，绘制出玫瑰花形状。