【HTML】情人节给npy一颗炫酷的💗

闲谈

兄弟们,这不情人节快要到了,我该送女朋友什么🎁呢?哦,对了,差点忘了,我好像没有女朋友。
【HTML】情人节给npy一颗炫酷的💗
【HTML】情人节给npy一颗炫酷的💗

不过这不影响我们要过这个节日,我们可以学习技术。举个简单的🌰: 比如说,今天我们学习了如何画一颗炫酷的💗,以后找到了女朋友忘准备礼物了,是不是可以用这个救救场,🐶。

开干

首先,我们需要画一个💗的形状出来,例如下面这样
【HTML】情人节给npy一颗炫酷的💗

这个简单,我们通过豆包搜一波公式即可。公式如下:

思路: 利用上面的公式,我们只需要根据许许多多的t去求得x,y的坐标,然后将这些点画出来即可。

使用Canvas时用到的一些函数解释,这里moveTolineTo还是有点上头的:

// 获取到一个绘图环境对象,这个对象提供了丰富的API来执行各种图形绘制和图像处理操作
ctx = canvas.getContext('2d');
/** 
该方法用于在当前路径上从当前点画一条直线到指定的 (x, y) 坐标。
当调用 lineTo 后,路径会自动延伸到新指定的点,并且如果之前已经调用了 beginPath() 或 moveTo(),则这条线段会连接到前一个点。
要看到实际的线条显示在画布上,需要调用 stroke() 方法。
*/
ctx.lineTo(x, y);
/**
此方法用于移动当前路径的起始点到指定的 (x, y) 坐标位置,但不会画出任何可见的线条。
它主要用于开始一个新的子路径或者在现有路径之间创建空隙。当你想要从一个地方不连续地移动到另一个地方绘制时,就需要使用 moveTo。
*/
ctx.moveTo(x, y);

友情提示:上面的函数是个倒的爱心,所以Y轴要取负数

粒子特效

这么快就做好了,是不是显得不是很够诚意?

【HTML】情人节给npy一颗炫酷的💗
【HTML】情人节给npy一颗炫酷的💗

我们可以加入一波粒子特效,这里我采用的方案是基于之前的Canvas+requestAnimationFrame来做。

首先什么是requestAnimationFrame呢?参见MDN

你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数,该回调函数会在浏览器下一次重绘之前执行

也就是我们可以使用这个函数达到每10ms刷新一次界面达到动态的效果。

首先我们定义一个粒子

// 粒子点的类
class Dot {
  constructor(x, y, initX, initY) {
    // 原始点的坐标,用来圈定范围
    this.initX = initX;
    this.initY = initY;
    this.x = x;
    this.y = y;
    this.r = 1;
    // 粒子移动的速度,也就是下一帧,粒子在哪里出现
    this.speedX = Math.random() * 2 - 1;
    this.speedY = Math.random() * 2 - 1;
    // 这个粒子最远能跑多远
    this.maxLimit = 15;
  }
  // 绘制每一个粒子的方法
  draw() {
    ctx.beginPath();
    ctx.fillStyle = themeColor;
    ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
    ctx.fill();
    ctx.closePath();
  }
  move() {
    if (Math.abs(this.x - this.initX) >= this.maxLimit)
      this.speedX = -this.speedX;
    if (Math.abs(this.x - this.y) >= this.maxLimit)
      this.speedY = -this.speedY;
    this.x += this.speedX;
    this.y += this.speedY;
    this.draw();
  }
}

我们在定义两个使用到粒子函数的方法.

  1. initDots函数,该函数主要是将粒子点初始化,并且画出来。
function initDots(x, y) {
  XYPoint = getXYPoint();
  dots = [];
  for (let point of XYPoint) {
    for (let i = 0; i < SINGLE_DOT_NUM; i++) {
      const border = Math.random() * 5;
      const dot = new Dot(
        border + point.x,
        border + point.y,
        point.x,
        point.y
      );
      dot.draw();
      dots.push(dot);
    }
  }
}
  1. moveDots函数,顾名思义,也就是移动粒子点
function moveDots() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  loveLine.draw();
  for (const dot of dots) {
    dot.move();
  }
  animationFrame = window.requestAnimationFrame(moveDots);
}

注:大家如果觉得中间那条实线不好看,可以去掉initLoveLine()即可。

最后

祝今天有情人终成眷属,单身兄弟们早日找到心仪的另一半,点赞的找另一半的速度更快点,🐶。

原文链接:https://juejin.cn/post/7333986476030345226 作者:鑫宝Code

(0)
上一篇 2024年2月13日 下午4:27
下一篇 2024年2月14日 上午10:05

相关推荐

发表评论

登录后才能评论