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开发了自己的软件，无法再使用该功能&…...
conda相比python好处
Conda 作为 Python 的环境和包管理工具，相比原生 Python 生态（如 pip 虚拟环境）有许多独特优势，尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处： 一、一站式环境管理：…...
深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录
ASP.NET Core 是一个跨平台的开源框架，用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录，以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...
【WiFi帧结构】
文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成：MAC头部frame bodyFCS，其中MAC是固定格式的，frame body是可变长度。 MAC头部有frame control，duration，address1，address2，addre…...
Linux相关概念和易错知识点（42）（TCP的连接管理、可靠性、面临复杂网络的处理）
目录 1.TCP的连接管理机制（1）三次握手①握手过程②对握手过程的理解 （2）四次挥手（3）握手和挥手的触发（4）状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...
服务器硬防的应用场景都有哪些？
服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式，避免服务器受到各种恶意攻击和网络威胁，那么，服务器硬防通常都会应用在哪些场景当中呢？ 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...
基于数字孪生的水厂可视化平台建设：架构与实践
分享大纲： 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年，数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段，基于数字孪生的水厂可视化平台的…...
【HTML-16】深入理解HTML中的块元素与行内元素
HTML元素根据其显示特性可以分为两大类：块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...
Python如何给视频添加音频和字幕
在Python中，给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加，包括必要的代码示例和详细解释。 环境准备 在开始之前，需要安装以下Python库：…...
html-＜abbr＞ 缩写或首字母缩略词
定义与作用 <abbr> 标签用于表示缩写或首字母缩略词，它可以帮助用户更好地理解缩写的含义，尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时，会显示一个提示框。 示例&#x…...
PAN/FPN
import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...