js绘制的红心
看腻歪了粒子特效的红心，今天给各位整个线条的，效果图如下：
表白显圣神器，你值得拥有，代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>canvas {position: absolute;left:0;top: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,.2);}</style>
</head>
<body>
<canvas id="heart"></canvas>
</body>
<script>window.requestAnimationFrame =window.__requestAnimationFrame ||window.requestAnimationFrame ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||window.oRequestAnimationFrame ||window.msRequestAnimationFrame ||(function () {return function (callback, element) {var lastTime = element.__lastTime;if (lastTime === undefined) {lastTime = 0;}var currTime = Date.now();var timeToCall = Math.max(1, 33 - (currTime - lastTime));window.setTimeout(callback, timeToCall);element.__lastTime = currTime + timeToCall;};})();window.isDevice = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(((navigator.userAgent || navigator.vendor || window.opera)).toLowerCase()));var loaded = false;var init = function () {if (loaded) return;loaded = true;var mobile = window.isDevice;var koef = mobile ? 0.5 : 1;var canvas = document.getElementById('heart');var ctx = canvas.getContext('2d');var width = canvas.width = koef * innerWidth;var height = canvas.height = koef * innerHeight;var rand = Math.random;ctx.fillStyle = "rgba(0,0,0,1)";ctx.fillRect(0, 0, width, height);var heartPosition = function (rad) {//return [Math.sin(rad), Math.cos(rad)];return [Math.pow(Math.sin(rad), 3), -(15 * Math.cos(rad) - 5 * Math.cos(2 * rad) - 2 * Math.cos(3 * rad) - Math.cos(4 * rad))];};var scaleAndTranslate = function (pos, sx, sy, dx, dy) {return [dx + pos[0] * sx, dy + pos[1] * sy];};window.addEventListener('resize', function () {width = canvas.width = koef * innerWidth;height = canvas.height = koef * innerHeight;ctx.fillStyle = "rgba(0,0,0,1)";ctx.fillRect(0, 0, width, height);});var traceCount = mobile ? 20 : 50;var pointsOrigin = [];var i;var dr = mobile ? 0.3 : 0.1;for (i = 0; i < Math.PI * 2; i += dr) pointsOrigin.push(scaleAndTranslate(heartPosition(i), 210, 13, 0, 0));for (i = 0; i < Math.PI * 2; i += dr) pointsOrigin.push(scaleAndTranslate(heartPosition(i), 150, 9, 0, 0));for (i = 0; i < Math.PI * 2; i += dr) pointsOrigin.push(scaleAndTranslate(heartPosition(i), 90, 5, 0, 0));var heartPointsCount = pointsOrigin.length;var targetPoints = [];var pulse = function (kx, ky) {for (i = 0; i < pointsOrigin.length; i++) {targetPoints[i] = [];targetPoints[i][0] = kx * pointsOrigin[i][0] + width / 2;targetPoints[i][1] = ky * pointsOrigin[i][1] + height / 2;}};var e = [];for (i = 0; i < heartPointsCount; i++) {var x = rand() * width;var y = rand() * height;e[i] = {vx: 0,vy: 0,R: 2,speed: rand() + 5,q: ~~(rand() * heartPointsCount),D: 2 * (i % 2) - 1,force: 0.2 * rand() + 0.7,f: "hsla(0," + ~~(40 * rand() + 60) + "%," + ~~(60 * rand() + 20) + "%,.3)",trace: []};for (var k = 0; k < traceCount; k++) e[i].trace[k] = {x: x, y: y};}var config = {traceK: 0.4,timeDelta: 0.01};var time = 0;var loop = function () {var n = -Math.cos(time);pulse((1 + n) * .5, (1 + n) * .5);time += ((Math.sin(time)) < 0 ? 9 : (n > 0.8) ? .2 : 1) * config.timeDelta;ctx.fillStyle = "rgba(0,0,0,.1)";ctx.fillRect(0, 0, width, height);for (i = e.length; i--;) {var u = e[i];var q = targetPoints[u.q];var dx = u.trace[0].x - q[0];var dy = u.trace[0].y - q[1];var length = Math.sqrt(dx * dx + dy * dy);if (10 > length) {if (0.95 < rand()) {u.q = ~~(rand() * heartPointsCount);}else {if (0.99 < rand()) {u.D *= -1;}u.q += u.D;u.q %= heartPointsCount;if (0 > u.q) {u.q += heartPointsCount;}}}u.vx += -dx / length * u.speed;u.vy += -dy / length * u.speed;u.trace[0].x += u.vx;u.trace[0].y += u.vy;u.vx *= u.force;u.vy *= u.force;for (k = 0; k < u.trace.length - 1;) {var T = u.trace[k];var N = u.trace[++k];N.x -= config.traceK * (N.x - T.x);N.y -= config.traceK * (N.y - T.y);}ctx.fillStyle = u.f;for (k = 0; k < u.trace.length; k++) {ctx.fillRect(u.trace[k].x, u.trace[k].y, 1, 1);}}//ctx.fillStyle = "rgba(255,255,255,1)";//for (i = u.trace.length; i--;) ctx.fillRect(targetPoints[i][0], targetPoints[i][1], 2, 2);window.requestAnimationFrame(loop, canvas);};loop();};var s = document.readyState;if (s === 'complete' || s === 'loaded' || s === 'interactive') init();else document.addEventListener('DOMContentLoaded', init, false);
</script>
</html>
相关文章：
js绘制的红心
看腻歪了粒子特效的红心，今天给各位整个线条的，效果图如下： 表白显圣神器，你值得拥有，代码如下： <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"…...
十、Feign客户端
目录 1、在springcloud-order项目中引入Feign客户端的依赖 2、在server-order服务的启动类中添加注解EnableFeignClients 3、使用FeignClient注解声明Feign客户端需要调用的远程接口 3.1、server-pay服务提供远程接口Controller 3.2、server-member服务提供远程接口Contro…...
登录appuploader
转载：登录appuploader 常规使用登录方法 双击appuploader.exe 启动appuploader 点击底部的未登录，弹出登录框 在登录框内输入apple开发者账号 如果没有apple开发者账号，只是普通的apple账号，请勾选上未支付688 然后软件会提示…...
都别吹牛逼了，2个英语指令简单评测便知ChatGPT、博弈Ai、文心一言、通义千问、讯飞星火真实水平
一、博弈Ai：GPT3.5版 演示：https://chat.bo-e.com/ 1、充当英语发言助手 评分：10分 总结：完整满足了指令需求 2、充当英汉互译器 评分：8分 总结：基本满足了我的指令需求。但是有点啰嗦，扣…...
使用Spring Boot快速搭建项目：减少配置，提升开发效率
使用Spring Boot快速搭建项目：减少配置，提升开发效率 一、Spring Boot简介1 Spring Boot的起源2 Spring Boot的核心特点3 Spring Boot的优势 二、Spring Boot快速搭建项目1 Spring Boot的项目搭建方式使用Spring Initializr创建项目使用Spring Boot CLI创…...
（2）数码管
LED数码管:数码管是一种简单、廉价的显示器，是由多个发光二极管封装在一起组成"8"字器件 51单片机是共阴极连接 74HC245这个芯片有什么作用呢？解：这个芯片被称之为双向数据缓冲器这个芯片的作用，用来进行数据缓冲(提高驱…...
赫夫曼树和赫夫曼编码详解
目录 何为赫夫曼树？ 赫夫曼树算法 赫夫曼编码 编程实现赫夫曼树 编程实现赫夫曼编码 编程实现WPL 总代码及分析 何为赫夫曼树？ 树的路径长度：从树根到每一结点的路径长度之和 结点的带权路径长度：从树根到该结点的路径长度…...
unity UGUI系统梳理 -交互组件
概述 unity 中的交互组件可用于处理交互，例如鼠标或触摸事件以及使用键盘或控制器进行的交互 1、按钮 (Button) Button详解 2、开关 (Toggle) Background：背景图片，控制toggle组件的背景颜色改变，从而展示此物体是否被选中的…...
HTTP第15讲——HTTP的连接管理
短连接 HTTP 协议最初（0.9/1.0）是个非常简单的协议，通信过程也采用了简单的“请求 - 应答”方式。 它底层的数据传输基于 TCP/IP，每次发送请求前需要先与服务器建立连接，收到响应报文后会立即关闭连接。 因为客户端与…...
深度剖析Mybatis-plus Injector SQL注入器
背景 在项目中需要同时操作Sql Server 以及 MySQL 数据库，可能平时直接使用 BaseMapper中提供的方法习惯 了，不用的话总感觉影响开发效率，但是两个数据库的SQL语法稍微有点差别，有些暴露的方法并不能直接使用，所以便想…...
【Mysql实战】使用存储过程和计算同比环比
背景 同环比，是基本的数据分析方法。在各类调研表中屡见不鲜，如果人工向前追溯统计数据，可想而知工作量是非常大的。 标题复制10行，并且每行大于10个字符【源码解析】SpringBoot接口参数【Mysql实战】使用存储过程和计算同比环比…...
ChatGPT的前世今生，到如今AI领域的竞争格局，本文带你一路回看!
73年前，“机器思维”的概念第一次被计算机科学之父艾伦图灵（Alan Turing）提出，从此，通过图灵测试成为了人类在AI领域为之奋斗的里程碑目标。 73年后的今天，在AI历经了数十年的不断进化、迭代后，…...
)
如何在JavaScript中获取当前时间yyyymmddhhmmss? (六种实现方式)
## 介绍 在编写JavaScript代码时，我们经常需要获取当前日期和时间。在本文中，我们将介绍几种获取当前时间并将其格式化为 yyyymmddhhmmss 的字符串的方法。 方法一：使用Date对象 在JavaScript中，我们可以使用 Date 对象来获取当…...
一、走进easyUI的世界
1.什么是easyUI？ jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要…...
2023 上半年软件设计师知识点复习总纲
前言：全国计算机技术与软件专业技术资格（水平）考试（以下简称IT职业资格考试）是由中华人民共和国人事部主管，国家计算机网络与信息安全管理中心主办的一项国家级、权威性的计算机职业技能水平认证考试。主要…...
深入理解Java虚拟机：JVM高级特性与最佳实践-总结-3
深入理解Java虚拟机：JVM高级特性与最佳实践-总结-3 垃圾收集器与内存分配策略垃圾收集算法标记-清除算法标记-复制算法标记-整理算法 垃圾收集器与内存分配策略 垃圾收集算法 标记-清除算法 最基础的垃圾收集算法是“标记-清除”（Mark-Sweepÿ…...
vue3 cesium datav 可视化大屏
目录 0. 预览效果 1. 代码库包 2. 技术点 3. 一些注意事项（配置参数） 4. 相关代码详情 0. 预览效果 包含的功能： ① 地球按照一定速度自转 ② 修改加载的geojson面样式 ③ 添加 文字 标注！ 1. 代码库包 直接采用vue-cli5 创建…...
python内置函数，推导式
abs：取绝对值 data abs（-10） pow：次方 data pow（2，5） sum：求和 num_list p[1,2,10,20] res sum(num_list) divmod取商和余数： v1，v2 divmod&…...
【Flink】DataStream API使用之Flink支持的数据类型
Flink的使用过程中，我们的数据都是定义好的 UserBehavior 类型，那还有没有其他更灵活的类型可以用呢？Flink 支持的数据类型到底有哪些？ 1. Flink 的类型系统 Flink 作为一个分布式处理框架，处理的是以数据对象作为元…...
QT实现固高运动控制卡示波器
目录 一、固高示波器 二、基于QCustomPlot实现示波器 三、完整源码 一、固高示波器 固高运动控制卡自带的软件有一个示波器功能，可以实时显示速度的波形，可辅助分析电机的运行状态。但是我们基于sdk开发了自己的软件，无法再使用该功能&…...
SpringBladex部署避坑指南：Nacos 2.0配置那些事儿
SpringBladex部署实战：Nacos 2.0配置冲突的深度解决方案 当你第一次尝试部署SpringBladex时，可能会遇到一个令人困惑的场景：明明在配置文件中正确设置了Nacos服务器地址，但应用启动时却固执地连接到了本地的127.0.0.1:8848。这不是…...
算法训练营第二天| 27. 双指针
题目链接：https://leetcode.cn/problems/remove-element/ 视频讲解：https://www.bilibili.com/video/BV12A4y1Z7LP自己看到题目的第一想法看到题目要求原地移除数组中所有等于给定值的元素，并返回新长度，我第一反应是这肯定不能真…...
AIAgent算力成本飙升？3步精准定位隐性开销并压降47%的实操指南
第一章：AIAgent算力成本飙升？3步精准定位隐性开销并压降47%的实操指南 2026奇点智能技术大会(https://ml-summit.org) 当AIAgent从原型走向生产，算力账单常以超预期50%的速度攀升——真正吞噬预算的并非大模型推理本身，而是未被…...
LIN一致性测试避坑指南：从电阻、电平到睡眠唤醒，实测CANoe外部设备集成那些事儿
LIN一致性测试实战避坑指南：从设备同步到脚本优化的全流程解析 当示波器波形与CANoe记录的时间轴对不上，当睡眠唤醒测试中的电源控制脚本频繁报错，当checksum错误让你在节点硬件与测试配置间反复排查——这些才是LIN一致性测试工程师的真实日…...
做了多年精益改善却没效果？精益改善不是工具，是机制
有个问题经常被反复讨论：为什么很多企业做了这么多年精益改善，现场还是乱、问题还是反复？因为大多数企业并不是不做精益改善，反而是——做了很多：每周都有改善会每个月都有改善提案指标有的还请过咨询公司、上过培训但…...
全文降AI工具价格效果对比：嘎嘎降AI、比话降AI怎么选
全文降AI工具价格效果对比：嘎嘎降AI、比话降AI怎么选 选全文降AI工具的时候，大家最关心两件事：一是效果好不好，二是价格贵不贵。 效果不好，花再少的钱也是浪费。效果好但价格离谱，很多同学也吃不消。所以最…...
飞书机器人消息收发失效 — 完整问题回溯报告@openclaw
问题概述: 安装飞书官方插件后，造成飞书机器人无响应，但是opencalw Web界面会话正常一、什么时间点引起的这个错误？时间事件2026-04-09 10:52:47安装官方插件 larksuite/openclaw-lark v2026.4.72026-04-09 10:54:11配置变更：禁用…...
HCIE为什么总是招人骂？现在还有价值吗？
说起HCIE，搞网络工程的人都清楚，它以前那可是被当成网络工程师的“终极证书”，意味着网络技术的最高水准。 不过呢，随着考这个证的人越来越多，市场环境也变了，HCIE在国内的含金量是不是还跟以前一样高呢&am…...
Unity中Dotween动画的精准控制：暂停、继续、终止与正反向播放实战
1. Dotween动画控制的核心场景 在游戏开发中，UI动画的精细控制直接影响用户体验。想象一个任务完成的弹窗：当玩家点击暂停按钮时，庆祝动画需要立即冻结；继续游戏时，动画应该从暂停的位置无缝衔接；如果玩家快…...
深入浅出Oracle RAC：gc buffer busy acquire等待事件的原理与优化策略
深入浅出Oracle RAC：gc buffer busy acquire等待事件的原理与优化策略 在Oracle RAC环境中，gc buffer busy acquire等待事件是影响性能的关键因素之一。这种等待事件通常发生在多个会话同时请求访问同一数据块时，特别是在跨实例访问的场景下。…...