【canvas】李峋同款爱心代码 html canvas js 直接浏览器打开

此为js版本,只需要有浏览器即可食用

  1. 新建一个后缀为html的空白文件
  2. 使用编辑器或者记事本打开空白文件
  3. 复制如下代码粘贴到记事本保存打开即可使用
    需要链接访问或爱心中增加名字但不知道如何操作的可私信

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>🧡</title>
    <meta name="Author" content="" />
    <meta name="Keywords" content="" />
    <meta name="Description" content="" />
    <style>
      html,
      body {
        height: 100%;
        padding: 0;
        margin: 0;
        background: #000;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <script>
      const { clientWidth, clientHeight } = document.documentElement;
      let canvasEl = document.getElementById("canvas");
      let ctx = canvasEl.getContext("2d");

      // canvas画布的宽 等于 可视区域的宽
      canvasEl.width = clientWidth;
      // canvas画布的高 等于 可视区域的高
      canvasEl.height = clientHeight;

      const HEART_COLOR = "#FF69B4"; // 顏色
      const ENLARGE = 11; //放大倍數
      const RADIAN_INC = Math.PI / 180; //增量
      const DEVIATION_W = clientWidth / 2; //偏移W
      const DEVIATION_H = clientHeight / 2; //偏移H

      let renderFrame = 0; // render

      ctx.strokeStyle = HEART_COLOR; // 设置画笔颜色

      function getHeart(t, shrinkRatio = ENLARGE) {
        let x = 16 * Math.pow(Math.sin(t), 3);
        let y = -(
          13 * Math.cos(t) -
          5 * Math.cos(2 * t) -
          2 * Math.cos(3 * t) -
          Math.cos(4 * t)
        );

        x *= shrinkRatio;
        y *= shrinkRatio;

        x += DEVIATION_W;
        y += DEVIATION_H;
        return [x, y];
      }

      function scatterInside(x, y, beta = 0.15) {
        let ratioX = -beta * Math.log(Math.random());
        let ratioY = -beta * Math.log(Math.random());
        let dx = ratioX * (x - DEVIATION_W);
        let dy = ratioY * (y - DEVIATION_H);

        return [x - dx, y - dy];
      }

      function shrink(x, y, ratio) {
        const force =
          -1 / ((x - DEVIATION_W) ** 2 + (y - DEVIATION_H) ** 2) ** 0.6;
        const dx = ratio * force * (x - DEVIATION_W);
        const dy = ratio * force * (y - DEVIATION_H);
        return [x - dx, y - dy];
      }

      function curve(p) {
        return (2 * (2 * Math.sin(4 * p))) / (2 * Math.PI);
      }

      function getRandom(arr) {
        const index = Math.floor(Math.random() * arr.length);
        return arr[index];
      }

      function getRandi(min, max) {
        max++;
        return Math.floor(Math.random() * (+max - +min)) + +min;
      }

      function canvasRect(canvasData) {
        const [x, y, size] = canvasData;
        ctx.fillStyle = HEART_COLOR;
        ctx.beginPath();
        ctx.rect(x, y, size, size);
        ctx.stroke();
      }

      class Heart {
        constructor(generateFrame = 24) {
          this.points = [];
          this.edgePoints = [];
          this.centerPoints = [];
          this.allPoints = {};
          this.build(2000);
          this.generateFrame = generateFrame;
          for (let i = 0; i < generateFrame; i++) {
            this.calc(i);
          }
        }
        calcPosition(x, y, ratio) {
          const force =
            1 / ((x - DEVIATION_W) ** 2 + (y - DEVIATION_H) ** 2) ** 0.52;

          const dx = ratio * force * (x - DEVIATION_W) + getRandi(-1, 1);
          const dy = ratio * force * (y - DEVIATION_H) + getRandi(-1, 1);

          return [x - dx, y - dy];
        }

        calc(generateFrame) {
          const ratio = 10 * curve((generateFrame / 10) * Math.PI);

          const haloRadius = Number(
            4 + 6 * (1 + curve((generateFrame / 10) * Math.PI))
          );
          const haloNumber = Number(
            1000 + 2000 * Math.abs(curve((generateFrame / 10) * Math.PI) ** 2)
          );

          const allPoints = [];

          const heartHaloPoint = new Set();

          for (let i = 0; i < haloNumber; i++) {
            let [_x, _y] = getHeart(Math.random() * 4 * Math.PI, 11.5);
            let [x, y] = shrink(_x, _y, haloRadius);
            if (!heartHaloPoint.has([x, y])) {
              heartHaloPoint.add([x, y]);
              x += getRandi(-14, 14);
              y += getRandi(-14, 14);
              const size = getRandom([1, 2, 2]);
              allPoints.push([x, y, size]);
            }
          }
          // 轮廓
          for (let i = 0; i < this.points.length; i++) {
            const [_x, _y] = this.points[i];
            const [x, y] = this.calcPosition(_x, _y, ratio);
            const size = getRandi(1, 3);
            allPoints.push([x, y, size]);
          }
          // 外围
          for (let i = 0; i < this.edgePoints.length; i++) {
            const [_x, _y] = this.edgePoints[i];
            const [x, y] = this.calcPosition(_x, _y, ratio);
            const size = getRandi(1, 2);
            allPoints.push([x, y, size]);
          }
          // 内部
          for (let i = 0; i < this.centerPoints.length; i++) {
            const [_x, _y] = this.centerPoints[i];
            const [x, y] = this.calcPosition(_x, _y, ratio);
            const size = getRandi(1, 2);
            allPoints.push([x, y, size]);
          }

          this.allPoints[generateFrame] = allPoints;
        }

        build(quantity) {
          // 构成爱心实体
          for (let i = 0; i < quantity; i++) {
            const [x, y] = getHeart(Math.random() * 2 * Math.PI);
            this.points.push([x, y]);
          }
          for (let i = 0; i < this.points.length; i++) {
            const [x, y] = this.points[i];
            for (let j = 0; j < 3; j++) {
              this.edgePoints.push(scatterInside(x, y, 0.05));
            }
          }
          for (let i = 0; i < quantity * 3; i++) {
            const [x, y] = getRandom(this.points);
            this.centerPoints.push(scatterInside(x, y, 0.17));
          }
        }

        render() {
          const frame = renderFrame % this.generateFrame;
          for (let i = 0; i < this.allPoints[frame].length; i++) {
            canvasRect(this.allPoints[frame][i]);
          }
        }
      }

      const heart = new Heart();

      function render() {
        ctx.clearRect(0, 0, clientWidth, clientHeight);
        heart.render();
        renderFrame++;
      }
      setInterval(() => {
        render();
      }, 160);

      // window.requestAnimationFrame(render);
    </script>
  </body>
</html>

  • 2
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
### 回答1: 李峋同款爱心代码是指通过H5技术实现李峋同款爱心动画效果。H5是一种基于HTML、CSS和JavaScript的技术,可以用来开发跨平台的网页应用。 要实现李峋同款爱心代码,首先需要用HTML定义一个包含爱心动画效果的区域,可以使用canvas或div等元素。然后使用CSS样式来定义爱心的颜色、大小、位置等属性。接着,通过JavaScript来实现爱心的动画效果,比如让爱心从底部向上飞行、逐渐变大或缩小等。 在实现爱心动画效果时,可以参考李峋同款爱心样式,比如选择鲜艳的红色、粉色或橙色作为爱心的颜色,采用心形的设计,或者加上彩虹效果等,以使动画更加生动有趣。 除了基本的动画效果,还可以根据需求添加其他交互功能,比如当用户点击爱心时触发音效或显示文字等。在代码编写完成后,可以使用浏览器打开HTML文件,即可看到李峋同款爱心代码的效果。 总之,李峋同款爱心代码是利用H5技术实现的一种爱心动画效果,通过HTML、CSS和JavaScript的配合使用,可以制作出与李峋同款爱心相似的动画。这种代码既可以用于个人网页展示,也可以用于其他有关爱心的应用场景,如情人节祝福页面、表白动画等。 ### 回答2: 李峋同款爱心代码h5是指通过使用HTML5技术编写的与李峋相关的爱心特效代码HTML5是一种用于构建和发布各种Web内容的标准,它提供了丰富的功能和特性,可以用于开发各种互动和视觉效果。爱心特效代码可以通过HTML5中的画布(Canvas)或CSS特效等方式实现。 李峋同款爱心代码h5可以通过以下步骤实现: 1. 创建HTML文件:首先,创建一个HTML文件,并编写HTML结构。可以使用HTML的div元素或者画布(Canvas)元素作为爱心特效的容器。 2. 引入爱心特效代码:在HTML文件中引入相关的JavaScript或CSS代码,这些代码用于实现爱心特效效果。这些代码可以通过在网上搜索相关资源或者自行编写实现。 3. 设置特效参数:根据需求,可以通过调整特效代码中的参数来修改爱心的大小、颜色、速度等属性,以实现想要的效果。 4. 测试和调整:保存HTML文件并在浏览器打开,查看爱心特效是否正常显示。根据实际效果进行调整,直到达到满意的效果。 李峋同款爱心代码h5可以用于网页设计、生日祝福、爱情表白等场景中,让页面更加生动和有趣。可以在网页中添加一个特效的容器,通过调用相应的JavaScript或CSS代码,让爱心特效在页面中动态展示。这样的代码可以以李峋为主题,展示对李峋的喜爱和支持。 总而言之,李峋同款爱心代码h5是一种利用HTML5技术实现的爱心特效代码,通过调整参数和引入特效代码,可以在网页中展示出与李峋相关的爱心特效效果。它为网页增添了互动和视觉效果,可以用于表达对李峋的爱戴和支持。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值