程序猿向女朋友表白的暖心代码浪漫

2024-01-11 12:25:47

程序猿的爱情总是那么与众不同，他们用代码来表达对女朋友的爱，用程序来制造浪漫，让科技与艺术完美融合。

这是一种独特的浪漫方式，也是一种对编程艺术的追求。

今天，我们就来为大家介绍一款程序猿专属的表白利器 —— 哄女朋友代码情话。

1. 雪花动态效果

用 JavaScript 代码实现雪花动态效果，让雪花在屏幕上飘舞，营造出一种浪漫的氛围。

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

// 创建雪花对象
class Snowflake {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.radius = Math.random() * 5 + 2; // 雪花的大小
    this.speed = Math.random() * 1 + 0.5; // 雪花的下降速度
    this.angle = Math.random() * 360; // 雪花的旋转角度
  }

  // 绘制雪花
  draw() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
    ctx.fillStyle = 'white';
    ctx.fill();
  }

  // 更新雪花的位置
  update() {
    this.y += this.speed;
    this.x += Math.cos(this.angle) * this.speed;
    this.angle += Math.random() * 0.1;

    // 雪花超出画布边界时，重新设置其位置
    if (this.y > canvas.height) {
      this.y = 0;
    }
    if (this.x > canvas.width || this.x < 0) {
      this.x = canvas.width / 2;
    }
  }
}

// 创建雪花数组
const snowflakes = [];
for (let i = 0; i < 100; i++) {
  snowflakes.push(new Snowflake(Math.random() * canvas.width, Math.random() * canvas.height));
}

// 循环绘制雪花
function drawSnowflakes() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  snowflakes.forEach((snowflake) => {
    snowflake.draw();
    snowflake.update();
  });

  requestAnimationFrame(drawSnowflakes);
}

drawSnowflakes();

2. canvas 绘制爱心

用 JavaScript 代码绘制一个红色的爱心，并让它随着鼠标移动而移动。

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

// 创建爱心对象
class Heart {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.radius = 50;
  }

  // 绘制爱心
  draw() {
    ctx.beginPath();
    ctx.moveTo(this.x, this.y - this.radius);
    ctx.bezierCurveTo(this.x - this.radius, this.y - this.radius, this.x - this.radius, this.y + this.radius, this.x, this.y + this.radius);
    ctx.bezierCurveTo(this.x + this.radius, this.y + this.radius, this.x + this.radius, this.y - this.radius, this.x, this.y - this.radius);
    ctx.fillStyle = 'red';
    ctx.fill();
  }

  // 更新爱心的位置
  update() {
    this.x = event.clientX;
    this.y = event.clientY;
  }
}

// 创建爱心对象
const heart = new Heart(canvas.width / 2, canvas.height / 2);

// 循环绘制爱心
function drawHeart() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  heart.draw();
  heart.update();

  requestAnimationFrame(drawHeart);
}

drawHeart();

3. 文字蒙版

用 JavaScript 代码实现文字蒙版效果，让文字逐渐显现出来。

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

// 创建文字对象
const text = '我爱你';

// 设置文字的字体和大小
ctx.font = 'bold 50px Arial';

// 设置文字的颜色
ctx.fillStyle = 'white';

// 创建蒙版对象
const mask = document.createElement('canvas');
mask.width = canvas.width;
mask.height = canvas.height;
const maskCtx = mask.getContext('2d');

// 绘制蒙版
maskCtx.fillStyle = 'black';
maskCtx.fillRect(0, 0, canvas.width, canvas.height);

// 创建一个渐变对象
const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
gradient.addColorStop(0, 'transparent');
gradient.addColorStop(1, 'white');

// 绘制文字
ctx.globalCompositeOperation = 'destination-in';
ctx.drawImage(mask, 0, 0);
ctx.fillStyle = gradient;
ctx.fillText(text, canvas.width / 2 - ctx.measureText(text).width / 2, canvas.height / 2);

// 逐渐显示文字
let opacity = 0;
const interval = setInterval(() => {
  opacity += 0.05;
  if (opacity >= 1) {
    clearInterval(interval);
  }
  ctx.globalAlpha = opacity;
  ctx.drawImage(mask, 0, 0);
  ctx.fillStyle = gradient;
  ctx.fillText(text, canvas.width / 2 - ctx.measureText(text).width / 2, canvas.height / 2);
}, 50);

4. 文字渐显

用 JavaScript 代码实现文字渐显效果，让文字从下往上逐渐显现出来。

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

// 创建文字对象
const text = '我爱你';

// 设置文字的字体和大小
ctx.font = 'bold 50px Arial';

// 设置文字的颜色
ctx.fillStyle = 'white';

// 创建一个渐变对象
const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
gradient.addColorStop(0, 'transparent');
gradient.addColorStop(1, 'white');

// 绘制文字
ctx.globalCompositeOperation = 'destination-in';
ctx.fillStyle = gradient;
ctx.fillText(text, canvas.width / 2 - ctx.measureText(text).width / 2, canvas.height / 2);

// 逐渐显示文字
let y = canvas.height;
const interval = setInterval(() => {
  y -= 10;
  if (y <= 0) {
    clearInterval(interval);
  }
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillText(text, canvas.width / 2 - ctx.measureText(text).width / 2, y);
}, 50);