AI 助理
备案控制台
开发者社区 通义大模型 文章 正文

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

2024-02-14 169
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
视觉智能开放平台，图像资源包5000点
视觉智能开放平台，分割抠图1万点
NLP自然语言处理_高级版，每接口累计50万次
简介： 兄弟们，这不情人节快要到了，我该送女朋友什么🎁呢？哦，对了，差点忘了，我好像没有女朋友。不过这不影响我们要过这个节日，我们可以学习技术。举个简单的🌰： 比如说，今天我们学习了如何画一颗炫酷的💗，以后找到了女朋友忘准备礼物了，是不是可以用这个救救场，🐶。

闲谈

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

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

开干

首先，我们需要画一个💗的形状出来，例如下面这样

这个简单，我们通过 通义 搜一波公式即可。公式如下：

思路：利用上面的公式，我们只需要根据许许多多的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()即可。

最后

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

文章标签：
前端开发
关键词：
HTML情人节
HTML npy
鑫宝Code
目录
相关文章
游客zdwjy7kxsq756
|
7月前
|
C语言 C++ Java
【HTML】情人节给npy一颗炫酷的💗
【HTML】情人节给npy一颗炫酷的💗
游客zdwjy7kxsq756
42 0
ThundersArk
|
前端开发 JavaScript
HTML+CSS+JAVASCRIPT实现——情人节表白情书
本文主要介绍如何使用HTML三件套来实现制作一封情人节表白情书,富含情谊与爱,打动女生的心灵
ThundersArk
797 2
HTML+CSS+JAVASCRIPT实现——情人节表白情书
Want595
|
6月前
|
前端开发 JavaScript
HTML情人节爱心代码
HTML情人节爱心代码
Want595
243 2
艾派森_
|
7月前
|
前端开发 JavaScript
基于HTML实现浪漫情人节表白代码（附源代码）
基于HTML实现浪漫情人节表白代码（附源代码）
艾派森_
409 0
红目香薰
情人节——微信朋友圈浓浓爱意的9张拼图（HTML版本）
情人节——微信朋友圈浓浓爱意的9张拼图（HTML版本）
红目香薰
139 1
情人节——微信朋友圈浓浓爱意的9张拼图（HTML版本）
IT邦德
|
移动开发 前端开发 JavaScript
又到一年情人节,用Html和Python来个花式表白
又到一年情人节,用Html和Python来个花式表白
IT邦德
363 0
又到一年情人节,用Html和Python来个花式表白
二二*一一
|
1月前
|
前端开发
如何利用 HTML 和 CSS 实现椭圆形布局，并在椭圆形路径上渲染可点击座位？
html 的椭圆形布局实现
二二*一一
115 1
疯狂的猿
|
2天前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
疯狂的猿
69 24
东方睿赢
|
1月前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计，再到HTML结构搭建与CSS样式设计，最后实现具体页面并进行优化提升，全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计，再到HTML结构搭建与CSS样式设计，最后实现具体页面并进行优化提升，全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现，强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
东方睿赢
61 7
土木林森
|
1月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制，两者不仅提升了代码复用率和可维护性，还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战，文章提出了相应的解决策略，强调了持续创新的重要性，旨在构建高效、灵活的Web应用。
土木林森
38 6

通义大模型

热门文章

最新文章

  • 1
    阿里云通义千问向全社会开放！
  • 2
    maven配置阿里云镜像源
  • 3
    ollama + qwen2.5-coder + VS Code + Continue 实现本地AI 辅助写代码
  • 4
    Cursor + qwen2.5-coder 32b 的配置方式
  • 5
    【完全免费】VS Code 最好用的 12 款 AI 代码提示插件！！！
  • 6
    大模型进阶微调篇（一）：以定制化3B模型为例，各种微调方法对比-选LoRA还是PPO，所需显存内存资源为多少？
  • 7
    深入剖析 Qwen2.5 - 32B 模型在 VLLM 上的单机三卡部署与运行
  • 8
    基于NVIDIA A30 加速卡推理部署通义千问-72B-Chat测试过程
  • 9
    通义千问API：让大模型使用各种工具
  • 10
    【项目实战】通过LLaMaFactory+Qwen2-VL-2B微调一个多模态医疗大模型
  • 1
    调用云端Qwen系列大模型（TURBO、PLUS、MAX和MAX_LATEST）在国际商业咨询智能体场景的实践探索
    13
  • 2
    QWEN-VL 也能打星际!!!
    27
  • 3
    基于Qwen 2.5的世界科学智能大赛冠军方案
    65
  • 4
    合合信息亮相CSIG AI可信论坛，全面拆解视觉内容安全的“终极防线”！
    24
  • 5
    AI 编码助手：编程路上的得力伙伴
    47
  • 6
    支付宝支付对接案例详解
    55
  • 7
    Qwen-coder实现本地 RAG 框架能力Bootstrap
    116
  • 8
    百度 SEO：不是玄学，是科学与艺术的 “恋爱”
    87
  • 9
    用 Qwen2.5-Coder 开发一个网页应用，完全0基础，已部署上线，代码开源！
    131
  • 10
    基于agentscope的多智能体游戏场景-骗子酒馆
    108

    • 相关课程

    更多
  • HTML 入门与实战
  • HTML基础入门学习
  • HTML5 新特性教程
  • 零基础学前端HTML+CSS

    • 相关电子书

    更多
  • 《零基础HTML入门教程》
  • 天猫 HTML5 互动技术实践
  • 天猫HTML5互动技术实践

    • 相关实验场景

    更多
  • Html5和Webpack3：Webpack5的常见用法
  • Html5和Webpack2：Webpack5打包JS和样式表
  • Html5和Webpack1：Webpack5打包工具介绍
  • HTML及前端框架
    • 下一篇
    手把手教你白嫖阿里云服务器(免费领服务器)