效果演示

主要代码如下:

(function () {
    // 获取Canvas元素和上下文
    const canvas = document.getElementById('heartCanvas');
    const ctx = canvas.getContext('2d');

    // 绘制心形
    ctx.beginPath();
    for (let theta = 0; theta < Math.PI * 2; theta += 0.01) {
        // 使用心形参数方程
        const x = 16 * Math.pow(Math.sin(theta), 3);
        const y =
            13 * Math.cos(theta) -
            5 * Math.cos(2 * theta) -
            2 * Math.cos(3 * theta) -
            Math.cos(4 * theta);

        // 调整缩放和平移使图形居中
        ctx.lineTo(x * 10 + 200, -y * 10 + 200);
    }
    ctx.closePath();
    ctx.fillStyle = '#e91e63'; // 粉红色填充
    ctx.fill();

    // 添加文字
    ctx.font = '30px Microsoft YaHei'; // 使用中文字体
    ctx.textAlign = 'center';         // 水平居中
    ctx.textBaseline = 'bottom';      // 垂直对齐基线
    ctx.fillStyle = '#333';           // 深灰色文字
    ctx.fillText('情人节,代码为伴', 200, 350); // 调整文字位置
})();