效果演示
主要代码如下:
(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); // 调整文字位置
})();