js实现心形线

使用Canvas绘制心形线

在JavaScript中，可以通过Canvas API绘制心形线（Cardioid）。以下是基于极坐标方程的完整实现代码：

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

const ctx = canvas.getContext('2d');
ctx.translate(200, 200);
ctx.scale(1, -1); // 翻转Y轴

// 心形线参数方程
function heart(t) {
    return {
        x: 16 * Math.pow(Math.sin(t), 3),
        y: 13 * Math.cos(t) - 5 * Math.cos(2*t) - 2 * Math.cos(3*t) - Math.cos(4*t)
    };
}

ctx.beginPath();
for (let t = 0; t < 2 * Math.PI; t += 0.01) {
    const point = heart(t);
    ctx.lineTo(point.x * 10, point.y * 10); // 放大10倍
}
ctx.closePath();

ctx.fillStyle = 'red';
ctx.fill();

使用SVG绘制动态心形

通过SVG和JavaScript结合可以创建动态效果：

const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("width", "400");
svg.setAttribute("height", "400");
document.body.appendChild(svg);

const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
svg.appendChild(path);

function updateHeart(scale) {
    let d = "";
    for (let t = 0; t < 2 * Math.PI; t += 0.1) {
        const x = 16 * Math.pow(Math.sin(t), 3) * scale;
        const y = (13 * Math.cos(t) - 5 * Math.cos(2*t) - 2 * Math.cos(3*t) - Math.cos(4*t)) * scale;
        d += (t === 0 ? "M" : "L") + (x + 200) + "," + (200 - y);
    }
    path.setAttribute("d", d + "Z");
    path.setAttribute("fill", "pink");
    path.setAttribute("stroke", "red");
}

let scale = 1;
setInterval(() => {
    scale = 0.8 + 0.2 * Math.sin(Date.now() / 500);
    updateHeart(scale);
}, 20);

数学参数方程说明

心形线的常用参数方程有以下两种形式：

笛卡尔坐标系方程： [ (x^2+y^2-1)^3-x^2y^3=0 ]

极坐标方程： [ r = a(1 - \cosθ) ]

代码中使用的参数方程是经过优化的心形曲线方程： [ \begin{cases} x = 16\sin^3θ \ y = 13\cosθ - 5\cos2θ - 2\cos3θ - \cos4θ \end{cases} ]

实现注意事项

绘制时需要处理坐标系转换，浏览器中Y轴默认向下为正方向，通常需要翻转Y轴。

对于动画效果，可以通过requestAnimationFrame实现平滑过渡，而不是使用setInterval。

心形线参数中的系数可以调整以获得不同形状的心形，例如修改Y轴方程中的13,5,2,1等系数会改变心形的胖瘦程度。