html--心花怒放

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Canvas 绘制一个❤</title><link rel="shortcut icon" href="../../assets/images/icon/favicon.ico" type="image/x-icon"><style>html,body {height: 100%;padding: 0;margin: 0;}canvas {position: absolute;width: 100%;height: 100%;}</style>
</head><body><canvas id="pinkboard">Canvas Not Support</canvas><script>/** Settings*/var settings = {particles: {length: 500, // maximum amount of particlesduration: 2, // particle duration in secvelocity: 100, // particle velocity in pixels/seceffect: -0.75, // play with this for a nice effectsize: 30, // particle size in pixels},};/** RequestAnimationFrame polyfill by Erik M?ller*/(function () {var b = 0; var c = ["ms", "moz", "webkit", "o"];for (var a = 0; a < c.length && !window.requestAnimationFrame; ++a) {window.requestAnimationFrame = window[c[a] + "RequestAnimationFrame"];window.cancelAnimationFrame = window[c[a] + "CancelAnimationFrame"] || window[c[a] + "CancelRequestAnimationFrame"]} if (!window.requestAnimationFrame) { window.requestAnimationFrame = function (h, e) { var d = new Date().getTime(); var f = Math.max(0, 16 - (d - b)); var g = window.setTimeout(function () { h(d + f) }, f); b = d + f; return g } }if (!window.cancelAnimationFrame) {window.cancelAnimationFrame = function (d) {clearTimeout(d)}}}());/** Point class*/var Point = (function () {function Point(x, y) {this.x = (typeof x !== 'undefined') ? x : 0;this.y = (typeof y !== 'undefined') ? y : 0;}Point.prototype.clone = function () {return new Point(this.x, this.y);};Point.prototype.length = function (length) {if (typeof length == 'undefined')return Math.sqrt(this.x * this.x + this.y * this.y);this.normalize();this.x *= length;this.y *= length;return this;};Point.prototype.normalize = function () {var length = this.length();this.x /= length;this.y /= length;return this;};return Point;})();/** Particle class*/var Particle = (function () {function Particle() {this.position = new Point();this.velocity = new Point();this.acceleration = new Point();this.age = 0;}Particle.prototype.initialize = function (x, y, dx, dy) {this.position.x = x;this.position.y = y;this.velocity.x = dx;this.velocity.y = dy;this.acceleration.x = dx * settings.particles.effect;this.acceleration.y = dy * settings.particles.effect;this.age = 0;};Particle.prototype.update = function (deltaTime) {this.position.x += this.velocity.x * deltaTime;this.position.y += this.velocity.y * deltaTime;this.velocity.x += this.acceleration.x * deltaTime;this.velocity.y += this.acceleration.y * deltaTime;this.age += deltaTime;};Particle.prototype.draw = function (context, image) {function ease(t) {return (--t) * t * t + 1;}var size = image.width * ease(this.age / settings.particles.duration);context.globalAlpha = 1 - this.age / settings.particles.duration;context.drawImage(image, this.position.x - size / 2, this.position.y - size / 2, size, size);};return Particle;})();/** ParticlePool class*/var ParticlePool = (function () {var particles,firstActive = 0,firstFree = 0,duration = settings.particles.duration;function ParticlePool(length) {// create and populate particle poolparticles = new Array(length);for (var i = 0; i < particles.length; i++)particles[i] = new Particle();}ParticlePool.prototype.add = function (x, y, dx, dy) {particles[firstFree].initialize(x, y, dx, dy);// handle circular queuefirstFree++;if (firstFree == particles.length) firstFree = 0;if (firstActive == firstFree) firstActive++;if (firstActive == particles.length) firstActive = 0;};ParticlePool.prototype.update = function (deltaTime) {var i;// update active particlesif (firstActive < firstFree) {for (i = firstActive; i < firstFree; i++)particles[i].update(deltaTime);}if (firstFree < firstActive) {for (i = firstActive; i < particles.length; i++)particles[i].update(deltaTime);for (i = 0; i < firstFree; i++)particles[i].update(deltaTime);}// remove inactive particleswhile (particles[firstActive].age >= duration && firstActive != firstFree) {firstActive++;if (firstActive == particles.length) firstActive = 0;}};ParticlePool.prototype.draw = function (context, image) {// draw active particlesif (firstActive < firstFree) {for (i = firstActive; i < firstFree; i++)particles[i].draw(context, image);}if (firstFree < firstActive) {for (i = firstActive; i < particles.length; i++)particles[i].draw(context, image);for (i = 0; i < firstFree; i++)particles[i].draw(context, image);}};return ParticlePool;})();/** Putting it all together*/(function (canvas) {var context = canvas.getContext('2d'),particles = new ParticlePool(settings.particles.length),particleRate = settings.particles.length / settings.particles.duration, // particles/sectime;// get point on heart with -PI <= t <= PIfunction pointOnHeart(t) {return new Point(160 * Math.pow(Math.sin(t), 3),130 * Math.cos(t) - 50 * Math.cos(2 * t) - 20 * Math.cos(3 * t) - 10 * Math.cos(4 * t) + 25);}// creating the particle image using a dummy canvasvar image = (function () {var canvas = document.createElement('canvas'),context = canvas.getContext('2d');canvas.width = settings.particles.size;canvas.height = settings.particles.size;// helper function to create the pathfunction to(t) {var point = pointOnHeart(t);point.x = settings.particles.size / 2 + point.x * settings.particles.size / 350;point.y = settings.particles.size / 2 - point.y * settings.particles.size / 350;return point;}// create the pathcontext.beginPath();var t = -Math.PI;var point = to(t);context.moveTo(point.x, point.y);while (t < Math.PI) {t += 0.01; // baby steps!point = to(t);context.lineTo(point.x, point.y);}context.closePath();// create the fillcontext.fillStyle = '#ea80b0';context.fill();// create the imagevar image = new Image();image.src = canvas.toDataURL();return image;})();// render that thing!function render() {// next animation framerequestAnimationFrame(render);// update timevar newTime = new Date().getTime() / 1000,deltaTime = newTime - (time || newTime);time = newTime;// clear canvascontext.clearRect(0, 0, canvas.width, canvas.height);// create new particlesvar amount = particleRate * deltaTime;for (var i = 0; i < amount; i++) {var pos = pointOnHeart(Math.PI - 2 * Math.PI * Math.random());var dir = pos.clone().length(settings.particles.velocity);particles.add(canvas.width / 2 + pos.x, canvas.height / 2 - pos.y, dir.x, -dir.y);}// update and draw particlesparticles.update(deltaTime);particles.draw(context, image);}// handle (re-)sizing of the canvasfunction onResize() {canvas.width = canvas.clientWidth;canvas.height = canvas.clientHeight;}window.onresize = onResize;// delay rendering bootstrapsetTimeout(function () {onResize();render();}, 10);})(document.getElementById('pinkboard'));</script>
</body></html>

在这里插入图片描述

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/732573.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

c++ primer中文版第五版作业第十五章

c++ primer中文版第五版作业第十五章

仓库地址 文章目录 15.115.215.315.415.515.615.715.815.915.1015.1115.1215.1315.1415.1515.1615.1715.1815.1915.2015.2115.2215.2315.2415.2515.2615.2615.2815.2915.3015.3115.3215.3315.3415.3515.3615.3715.3815.3915.4015.4115.42 15.1 基类希望其派生类进行覆盖的函数&…
阅读更多...
C#实现快速排序算法

C#实现快速排序算法

C#实现快速排序算法 以下是C#中的快速排序算法实现示例&#xff1a; using System;class QuickSort {// 快速排序入口函数public static void Sort(int[] array){QuickSortRecursive(array, 0, array.Length - 1);}// 递归函数实现快速排序private static void QuickSortRecu…
阅读更多...
springboot配置Redis缓存多节点

springboot配置Redis缓存多节点

随着微服务架构的广泛应用&#xff0c;分布式缓存系统在提升系统性能、降低数据库压力方面起着关键作用。Redis作为高性能的内存键值对数据库&#xff0c;凭借其丰富的数据结构和高速读写能力&#xff0c;在众多缓存解决方案中脱颖而出。在Spring Boot框架中&#xff0c;我们可…
阅读更多...
Python 潮流周刊第 41 期（摘要），赠书5本

Python 潮流周刊第 41 期（摘要），赠书5本

本周刊由 Python猫 出品&#xff0c;精心筛选国内外的 250 信息源&#xff0c;为你挑选最值得分享的文章、教程、开源项目、软件工具、播客和视频、热门话题等内容。愿景&#xff1a;帮助所有读者精进 Python 技术&#xff0c;并增长职业和副业的收入。 周刊全文&#xff1a;h…
阅读更多...
测试开发面试题|面试真题

测试开发面试题|面试真题

📋 个人简介 作者简介：大家好，我是凝小飞，软件测试领域作者支持我：点赞👍+收藏⭐️+留言📝测试开发的面试题，一般会考一些基础的算法编程题，难度不是特别高，除非是大厂的那种卷，如下是我作为面试官整理的一些参考测试题，供参考 算法排序类 Python: 一、list…
阅读更多...
ubuntu自带屏幕截图功能

ubuntu自带屏幕截图功能

目录 简介开始截屏步骤1.打开截屏软件2.选择区域3.截图 快捷键 录屏方法11.开始录屏2.停止录屏 方法2 补充说明 简介 试了好多开源跨平台截图软件&#xff0c;但是在ubuntu上都或多或少存在问题。ubuntu有自带的截图软件。打算把ubuntu自带的截图软件用起来。 顺便说一下我使…
阅读更多...
B端系统升级，登录页必在升级之列，不容置疑。

B端系统升级，登录页必在升级之列，不容置疑。

进行B端界面升级时&#xff0c;首先升级登录页有以下几个原因&#xff1a; 用户体验&#xff1a;登录页是用户进入系统的第一个页面&#xff0c;用户首先接触到的界面。通过升级登录页&#xff0c;可以提升用户的第一印象&#xff0c;增强用户对系统的信任感和好感度&#xff…
阅读更多...
Android Studio编译及调试知识

Android Studio编译及调试知识

文章目录 Android Studio编译kotlin项目Android Studio编译Java和kotlin混合项目的过程gradle打印详细错误信息&#xff0c;类似这种工具的使用Android apk 从你的代码到APK打包的过程&#xff0c;APK安装到你的Android手机上的过程&#xff0c;最后安装好的形态&#xff0c;以…
阅读更多...
简单形状点云轮廓点排序（旋转角）

简单形状点云轮廓点排序（旋转角）

1、背景介绍 很多边缘提取算法提取的边缘点为无序点云&#xff0c;如下图所示&#xff0c;无序点云不利于后续各种应用&#xff0c;比如根据边缘计算点云面积、点云轮廓线规则化等。若对点云进行排序&#xff0c;则可以进行上述引用。但实际上&#xff0c;点云形状错综复杂&…
阅读更多...
Dubbo 和 Zookeeper 的关系

Dubbo 和 Zookeeper 的关系

Dubbo 和 Zookeeper 的关系 Zookeeper的作用 zookeeper用来注册服务和进行负载均衡&#xff0c;哪一个服务由哪一个机器来提供必需让调用者知道&#xff0c;简 单来说就是ip地址和服务名称的对应关系。当然也可以通过硬编码的方式把这种对应关系在调用方 业务代码中实现&#…
阅读更多...
蓝桥杯第十四届真题 棋盘 二维差分数组

蓝桥杯第十四届真题 棋盘 二维差分数组

题目 小蓝拥有 nn 大小的棋盘&#xff0c;一开始棋盘上全都是白子。 小蓝进行了 m 次操作&#xff0c;每次操作会将棋盘上某个范围内的所有棋子的颜色取反(也就是白色棋子变为黑色&#xff0c;黑色棋子变为白色)。 请输出所有操作做完后棋盘上每个棋子的颜色。 输入格式 输…
阅读更多...
AVL树讲解

AVL树讲解

AVL树 1. 概念2. AVL节点的定义3. AVL树插入3.1 旋转 4.AVL树的验证 1. 概念 AVL树是一种自平衡二叉搜索树。它的每个节点的左子树和右子树的高度差&#xff08;平衡因子&#xff0c;我们这里按右子树高度减左子树高度&#xff09;的绝对值不超过1。AVL的左子树和右子树都是AV…
阅读更多...
P8651 [蓝桥杯 2017 省 B] 日期问题---洛谷（题解）

P8651 [蓝桥杯 2017 省 B] 日期问题---洛谷（题解）

这周周赛的题&#xff0c;我感觉我这题写的还是不错的&#xff0c;用到了上周周赛的口算题中别人题解的函数和最近了解substr还有去年天梯校赛有个日期检验的题&#xff0c;都有用到。 题目描述 小明正在整理一批历史文献。这些历史文献中出现了很多日期。小明知道这些日期都…
阅读更多...
Rust 语言中的泛型

Rust 语言中的泛型

在Rust中&#xff0c;泛型&#xff08;Generics&#xff09;是一种允许你编写与多种不同数据类型一起工作的代码的方式。Rust主要通过两种方式来支持泛型&#xff1a;使用泛型函数和泛型结构体。下面是一些使用Rust泛型的示例。 一、泛型函数示例 fn add<T>(x: T, y: T…
阅读更多...
MIT6.5840（6.824）Lab2总结（Raft）

MIT6.5840（6.824）Lab2总结（Raft）

MIT6.5840&#xff08;原MIT6.824&#xff09;Lab2总结&#xff08;Raft&#xff09; 资源分享&#xff1a; 官网地址&#xff1a;http://nil.csail.mit.edu/6.5840/2023/ Raft论文地址&#xff1a;http://nil.csail.mit.edu/6.5840/2023/papers/raft-extended.pdf 官方学生…
阅读更多...
学习笔记 反悔贪心

学习笔记 反悔贪心

0.写在前面 好久没更了&#xff0c;这周是开学第一周 A C M ACM ACM队临时安排讲课任务&#xff0c;没人讲&#xff0c;我就揽下来这活了。前两天有一道 c f cf cf的 d i v 2 C div2C div2C用到了反悔贪心这个技巧&#xff0c;也不需要什么前置算法就可以学&#xff0c;所以我…
阅读更多...
JAVA循环中标记的作用

JAVA循环中标记的作用

在Java循环中标记的作用是为循环语句提供一个标识符&#xff0c;使得程序可以在循环嵌套时跳出指定的循环。它可以用于在内部循环中控制外部循环&#xff0c;或者在多个嵌套循环中控制跳出特定的循环块。 标记通常与break和continue语句一起使用。使用break语句配合标记可以跳…
阅读更多...
CentOS上安装与配置Nginx

CentOS上安装与配置Nginx

CentOS上安装与配置Nginx Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件&#xff08;IMAP/POP3&#xff09;代理服务器&#xff0c;并在一个BSD-like协议下发行。以下是在CentOS系统上安装和配置Nginx的步骤。 &#x1f31f; 前言 欢迎来到我的小天地&#xff0c;这…
阅读更多...
在深度学习中，时间、空间、通道三个维度是什么？

在深度学习中，时间、空间、通道三个维度是什么？

在深度学习中&#xff0c;时间、空间、通道三个维度是什么&#xff1f; 在深度学习中&#xff0c;时间、空间和通道是描述输入数据的三个主要维度。 空间维度&#xff08;Spatial Dimension&#xff09;&#xff1a; 指的是输入数据在空间中的排列方式。对于图像数据来说&…
阅读更多...
Web Servlet

Web Servlet

目录 1 简介2 创建Servlet项目并成功发布运行3 新加Servlet步骤4 Servlet项目练习5 Servlet运行原理6 操作 HTTP Request头的方法(部分方法示例)7 操作 HTTP Response头的方法(部分方法示例)8 两种重定向(页面跳转)方法9 Cookie9.1 Cookie工作原理9.2 cookie构成9.3 Servlet 操…
阅读更多...
最新文章

Copyright @ 2022~2023