程序员节送女神礼物：用代码写一段表白爱心

2023-07-24 08:36:03

用代码向女神表达爱意：一份独特的节日礼物

爱是浪漫永恒的起点

当我们对自己充满爱意，才能理解如何爱他人，并被他人所爱。用代码表白爱意，不仅是对自我的关怀，更是一种表达对他人爱意的途径。

代码表白的浪漫方式

用代码表达爱意的方式多种多样，这里我们将介绍一种简便易行的方法，融合 HTML、CSS 和 JavaScript 代码。

HTML 代码

<body>
  <canvas id="canvas"></canvas>
  <script src="script.js"></script>
</body>

CSS 代码

canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

JavaScript 代码

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// 设置画布大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 创建爱心形状路径
const heartPath = new Path2D();
heartPath.moveTo(canvas.width / 2, canvas.height / 2);
heartPath.bezierCurveTo(canvas.width / 2 + 100, canvas.height / 2 - 100, canvas.width / 2 + 200, canvas.height / 2, canvas.width / 2 + 200, canvas.height / 2 + 100);
heartPath.bezierCurveTo(canvas.width / 2 + 200, canvas.height / 2 + 200, canvas.width / 2 + 100, canvas.height / 2 + 300, canvas.width / 2, canvas.height / 2 + 300);
heartPath.bezierCurveTo(canvas.width / 2 - 100, canvas.height / 2 + 300, canvas.width / 2 - 200, canvas.height / 2 + 200, canvas.width / 2 - 200, canvas.height / 2 + 100);
heartPath.bezierCurveTo(canvas.width / 2 - 200, canvas.height / 2, canvas.width / 2 - 100, canvas.height / 2 - 100, canvas.width / 2, canvas.height / 2);

// 绘制爱心形状
ctx.fillStyle = "#FF0000";
ctx.fill(heartPath);

// 创建文字路径
const textPath = new Path2D();
textPath.moveTo(canvas.width / 2 - 50, canvas.height / 2 - 50);
textPath.lineTo(canvas.width / 2 + 50, canvas.height / 2 - 50);
textPath.lineTo(canvas.width / 2 + 50, canvas.height / 2 + 50);
textPath.lineTo(canvas.width / 2 - 50, canvas.height / 2 + 50);
textPath.lineTo(canvas.width / 2 - 50, canvas.height / 2 - 50);

// 绘制文字路径
ctx.fillStyle = "#FFFFFF";
ctx.fill(textPath);

// 创建文字
const text = "我爱你";
ctx.font = "bold 50px Arial";
ctx.fillStyle = "#000000";
ctx.fillText(text, canvas.width / 2 - 50, canvas.height / 2 + 25);