关于前端:HTML情人节给npy一颗炫酷的💗

6次阅读

共计 5750 个字符，预计需要花费 15 分钟才能阅读完成。

闲聊

兄弟们，这不情人节快要到了，我该送女朋友什么🎁呢？哦，对了，差点忘了，我如同没有女朋友。

不过这不影响咱们要过这个节日，咱们能够学习技术。举个简略的🌰：比如说，明天咱们学习了如何画一颗炫酷的💗，当前找到了女朋友忘筹备礼物了，是不是能够用这个救救场，🐶。

开干

首先，咱们须要画一个💗的形态进去，例如上面这样

这个简略，咱们通过豆包搜一波公式即可。公式如下：

思路：利用下面的公式，咱们只须要依据许许多多的 t 去求得 x,y 的坐标，而后将这些点画进去即可。应用 Canvas 时用到的一些函数解释, 这里 moveTo 和lineTo还是有点上头的：// 获取到一个绘图环境对象，这个对象提供了丰盛的 API 来执行各种图形绘制和图像处理操作

ctx = canvas.getContext('2d');
/** 
该办法用于在以后门路上从以后点画一条直线到指定的 (x, y) 坐标。当调用 lineTo 后，门路会主动延长到新指定的点，并且如果之前曾经调用了 beginPath() 或 moveTo()，则这条线段会连贯到前一个点。要看到理论的线条显示在画布上，须要调用 stroke() 办法。*/
ctx.lineTo(x, y);
/**
此办法用于挪动以后门路的起始点到指定的 (x, y) 坐标地位，但不会画出任何可见的线条。它次要用于开始一个新的子门路或者在现有门路之间创立空隙。当你想要从一个中央不间断地挪动到另一个中央绘制时，就须要应用 moveTo。*/
ctx.moveTo(x, y);

情谊提醒：下面的函数是个倒的爱心，所以 Y 轴要取正数。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>LoveCanvas</title>
    <style>
      body {background: black;}
    </style>
  </head>
  <body>
    <canvas id="canvas"></canvas>
  </body>
  <script>
    const canvas = document.getElementById("canvas");
    const ctx = canvas.getContext("2d");
    const themeColor = "#d63e83";
    // 爱心线的实体
    let loveLine = null;
    // 保留爱心方程的坐标
    let XYPoint = [];
    // 线条宽度，可自定义批改
    const lineWidth = 5;

    /** 失去爱心方程的坐标 **/
    function getXYPoint() {const pointArr = [];
      const enlargeFactor = 20;
      for (let t = 0; t < 2 * Math.PI; t += 0.01) {const x = 16 * Math.pow(Math.sin(t), 3) * enlargeFactor;
        const y =
          -(13 * Math.cos(t) -
            5 * Math.cos(2 * t) -
            2 * Math.cos(3 * t) -
            Math.cos(4 * t)
          ) * enlargeFactor;
        // 将爱心的坐标进行居中
        pointArr.push({x: canvas.width / 2 + x, y: canvas.height / 2 + y});
      }
      return pointArr;
    }

    class LoveLine {constructor(pointXY) {this.pointXY = pointXY;}
      draw() {for (let point of this.pointXY) {ctx.lineTo(point.x, point.y);
          ctx.moveTo(point.x, point.y);
        }
        ctx.strokeStyle = themeColor;
        ctx.lineWidth = lineWidth;
        ctx.stroke();
        ctx.fill();}
    }

    function initLoveLine() {XYPoint = getXYPoint();
      loveLine = new LoveLine(XYPoint);
      loveLine.draw();}

    function init() {
      const width = window.innerWidth;
      const height = window.innerHeight;
      canvas.width = width;
      canvas.height = height;
      initLoveLine();}

    // 如果须要放弃在窗口大小变动时也实时更新 canvas 尺寸
    window.onresize = init;
    init();
  </script>
</html>

粒子特效

这么快就做好了，是不是显得不是很够诚意？

咱们能够退出一波粒子特效，这里我采纳的计划是基于之前的 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);
}

残缺代码如下：

<!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>LoveCanvas</title>
      <style>
        body {background: black;}
      </style>
    </head>
    <body>
      <canvas id="canvas"></canvas>
    </body>
    <script>
      const canvas = document.getElementById("canvas");
      const ctx = canvas.getContext("2d");
      const themeColor = "#d63e83";
      // 爱心线的实体
      let loveLine = null;
      // 保留爱心方程的坐标
      let XYPoint = [];
      // 线条宽度，可自定义批改
      const lineWidth = 5;
      // 每个原来的点对应的粒子数目
      const SINGLE_DOT_NUM = 15;
      // 粒子点的汇合
      let dots = [];
      let animationFrame = null;


      /** 失去爱心方程的坐标 **/
      function getXYPoint() {const pointArr = [];
      const enlargeFactor = 20;
      for (let t = 0; t < 2 * Math.PI; t += 0.01) {const x = 16 * Math.pow(Math.sin(t), 3) * enlargeFactor;
        const y =
        -(13 * Math.cos(t) -
        5 * Math.cos(2 * t) -
        2 * Math.cos(3 * t) -
        Math.cos(4 * t)
        ) * enlargeFactor;
        // 将爱心的坐标进行居中
        pointArr.push({x: canvas.width / 2 + x, y: canvas.height / 2 + y});
        }
        return pointArr;
        }

        class LoveLine {constructor(pointXY) {this.pointXY = pointXY;}
        draw() {for (let point of this.pointXY) {ctx.lineTo(point.x, point.y);
        ctx.moveTo(point.x, point.y);
        }
        ctx.strokeStyle = themeColor;
        ctx.lineWidth = lineWidth;
        ctx.stroke();
        ctx.fill();}
        }

        function initLoveLine() {XYPoint = getXYPoint();
        loveLine = new LoveLine(XYPoint);
        loveLine.draw();}

        // 粒子点的类
        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();}
        }

        function initLoveLine() {XYPoint = getXYPoint();
        loveLine = new LoveLine(XYPoint);
        loveLine.draw();}

        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);
        }
        }
        }

        function moveDots() {ctx.clearRect(0, 0, canvas.width, canvas.height);
        loveLine.draw();
        for (const dot of dots) {dot.move();
        }
        animationFrame = window.requestAnimationFrame(moveDots);
        }

        function init() {
          const width = window.innerWidth;
        const height = window.innerHeight;
        canvas.width = width;
        canvas.height = height;
        if (animationFrame) {window.cancelAnimationFrame(animationFrame);
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        }
        initLoveLine();
        initDots();
        moveDots();}

        // 如果须要放弃在窗口大小变动时也实时更新 canvas 尺寸
        window.onresize = init;
        init();
      </script>
    </html>

注：大家如果感觉两头那条线不难看，能够去掉 initLoveLine()即可。

最初

祝明天有情人终成眷属，有情人早日找到心仪的另一半，哈哈

正文完
前端
发表至： 前端
2024-02-14
 0
关于前端:dispatchEvent
关于前端:问题记录
关于前端:webpack-从-0-到-1-构建-vue
关于前端:大型DOM结构是如何影响交互性的

站内搜索

-「」