站长工具

线条组成的爱心

作者：kimi77

看腻歪了粒子特效的红心，今天给各位整个线条的，效果图如下：

 

表白显圣神器，你值得拥有，代码如下：

<!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>

 

本文转载于网络 如有侵权请联系删除

相关文章

  • 电子产品中EMC隔离设计的方法

    目录1、隔离分类2、EMC中隔离分析2.1、光耦隔离2.2、继电器隔离2.3、共模扼流圈（共模电感）隔离1、隔离分类常见的电路隔离常用在以下几种情况：模拟电路内的隔离 对于模拟信号测量系统，其隔离电路相对比较复杂，既要考虑其精度、频带宽度的因素，又要考虑其价格因素。同时既有高电压、大电流信号，又有微电压、微电流信号，这些信号之间需要进行隔离，实现在一定的频率下的隔离。数字电路内的隔离 数字量输人系统主要采用脉冲隔离变压器隔离、光电耦合器隔离；而数字量输出系统主要采用光电耦合器隔离、继电器隔离，个别情况也可采用高频隔离变压器隔离。模拟电路与数字电路之间的隔离 一般来说，模拟电路与数字电路之间的转换通过模/数转换器（A/D)或数/模转换器(D/A）来实现。但是，若不采取一定的措施，数字电路中的高频周期信号就会对模拟电路带来一定的干扰，影响测量的精度。为了抑制数字电路对模拟电路带来的干扰，一般须将模拟电路与数字电路分开布线，但这种布线方式有时还不能彻底排除来自数字电路的干扰。要想排除来自数字电路的干扰，可以把数字电路与模拟电路隔离开来。常用的隔离方法是在A/D转换器与数字电路之间加入光电耦合

  • Zookeeper是什么&怎么用

    1.Zookeeper概述Zookeeper是一个开源的分布式协调服务框架，主要用来解决分布式集群中应用系统的一致性问题和数据管理问题2:Zookeeper的特点Zookeeper本质上是一个分布式文件系统,适合存放小文件，也可以理解为一个数据库在上图左侧,Zookeeper中存储的其实是一个又一个Znode,Znode是Zookeeper中的节点 Znode是有路径的,例如/data/host1,/data/host2,这个路径也可以理解为是Znode的Name Znode也可以携带数据,例如说某个Znode的路径是/data/host1,其值是一个字符串"192.168.0.1" 正因为Znode的特性,所以Zookeeper可以对外提供出一个类似于文件系统的试图,可以通过操作文件系统的方式操作Zookeeper 使用路径获取Znode获取Znode携带的数据修改Znode携带的数据删除Znode添加Znode3.Zookeeper的应用场景3.1数据发布/订阅数据发布/订阅系统,需要发布者将数据发布到Zookeeper的节点上，供订阅者进行数据订阅，进而达到动

  • Python学习案例之Web版语音合成

    前言语音合成技术能将用户输入的文字，转换成流畅自然的语音输出，并且可以支持语速、音调、音量设置，打破传统文字式人机交互的方式，让人机沟通更自然。应用场景将游戏场景中的公告、任务或派单信息通过语音播报，让玩家玩游戏或配送员送货的同时，也可接听新任务。文学小说类软件，可以利用百度语音合成技术将文学小说作品进行高质量的朗读，流畅清晰，解放双眼，畅听世界。软件架构Python3.7.2、Django2.1.7、baidu-aip(百度语音API)案例这里只展示部分代码，有兴趣的同学可以自行下载源码安装调试。importos importtime importcodecs fromaipimportAipSpeech fromdjango.shortcutsimportrender fromdjango.httpimportHttpResponse ''' pipinstall--upgradepip pipinstalldjango pipinstallbaidu-aip ''' defmain(request): retur

  • 如何高效的使用PowerShell备份数据库

    初始脚本Get-SqlDatabase-ServerInstancelocalhost| Where{$_.Name-ne'tempdb'}| Backup-SqlDatabase复制复制使用上面的命令我们就能每天备份数据库到指定路径去。当然，这只是一个实例，加入打算备份每一个数据库在备份在各自的数据库实例的服务器上，又该如何修改上面的语句那？目的是批量备份多个实例的数据库，注意这里需要提前把数据库实例存储在一个地方，然后循环遍历出来，代码如下：foreach$RegisteredSQLsINdir-recurseSQLSERVER:\SQLRegistration\'DatabaseEngineServerGroup'\Host\|where{$_.Mode-ne'd'}) { Get-SqlDatabase-ServerInstance$RegisteredSQLs.Name| Where{$_.Name-ne'tempdb'}| Backup-SqlDatabase }复制代码可是真心简短。当然这不足

  • 【拓展】学习Java的6个技巧

    1.一定要看书现在学习Java变得比以前容易多了，除了有大量的视频教程外，还有专业的java培训机构，这都使学Java变得越来越容易，然而那只代表入门容易，并不代表这门编程技术就真的变简单了。如果仅仅学了些皮毛，高手写的程序你是望尘莫及的。在学习的过程中，书籍永远是知识最好的载体，很多优秀的程序员大师精心编撰的编程书籍，富含的不仅仅是一些知识，更多的是他们所传授的思想，通过看书，专研书籍中的内容，会让你变得更加聪明，写的程序也更加的精炼。2.编程的时候，一定要独立思考现在网络很发达，很多程序员总爱百度，一个jdbc这么初级的东东，每次用还总是百度查。这个东西应该是熟记于心的，随时用，信手拈来，这样才能成为高手。就好像一个修理工，一遍查手册，一边给你修车，亦或是一个医生，一边看教程，一边给你看病，想想就觉得恐怖。3.算法很重要，要不断的优化程序现在很多人都是快速的学习，快速的练习，反复的练习。而老九君的建议是，无论你学到什么阶段，都要去不断的优化自己的编程，能用3行实现的程序，不用5行，这样你编写的程序才能更加凝练。而且，编程学习的中后期，就要重视算法，尽量编程优质的程序，这才是编程的美

  • R优雅的进行统计分析(1) T_test

    ❝本节来介绍如何使用R语言来做数据统计分析，通过「rstati」包进行t-test，完全使用tidyverse体系进行数据清洗及可视化 ❞安装并加载R包package.list=c("tidyverse","rstatix","ggtext") for(packageinpackage.list){ if(!require(package,character.only=T,quietly=T)){ install.packages(package) library(package,character.only=T) } } 复制数据清洗❝自定义计算sd,se;以「0.5」为对照进行t_test,通过dplyr整理绘图数据，去掉NA,ns ❞df<-ToothGrowth%>% mutate(dose=as.factor(dose))%>% group_by(dose)%>% summarise(value_mean=mean(len),sd=sd(len),se=sd(len)/sqrt(n()))%

  • OpenCV获取与设置像素点的值的几个方法

    http://blog.sina.com.cn/s/blog_6a2844750101at8y.html

  • dispatch_source_create创建定时器和UIWindow创建类似处

    dispatch_source_create创建定时器   //定时器   dispatch_queue_tqueue=dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT,0);   //   创建定时器,本身也是个oc对象,必须设置为全局，不然已创建就销毁了，所以要保存下来   _progressTimer=dispatch_source_create(DISPATCH_SOURCE_TYPE_TIMER,0,0,queue);   //控制计时器第一次触发的时刻，延迟0s   dispatch_time_tstrat=dispatch_time(DISPATCH_TIME_NOW,0*NSEC_PER_SEC);   //每隔多长时间执行一次   dispatch

  • 数据结构第八章学习小结

    一、学习内容小结    排序可分为两大类：  内部排序（InternalSorting）：待排序的记录全部存放在计算机内存中进行的排序过程；    外部排序（ExternalSorting）：待排序的记录数量很大，内存不能存储全部记录，需要对外存进行访问的排序过程。（现阶段还没有详细深入的学习）   （本章学习的排序方法比较多，有点容易混淆，难记忆，花了比较多的时间在把各类方法总结成表格，看着对比比较清晰易懂一些。） 排序方法分类 排序方法 （内部排序） 概述 时间复杂度分析 空间复杂度分析 算法特点 （优缺点） 交换类   冒泡排序 重复走访过要排序的元素列，依次比较两个相邻的元素，如果顺序错误就把他们交换过来，直到没有相邻元素需要交换，则排序完成。 O（n^2） O（1） （两元素交换时,只需要一个记录的辅助空间） 优点：①稳定排序②可用于链式存储结构 缺点：①不适用于初始记录无序、n较大的情况 快速排序 通过一趟排序将待排记录分隔成独立的两部分

  • SpringAOP实验

    目录结构 代码 java packagecn.edu.sdau.aop; publicinterfaceArithmeticCalculator{ publicintadd(inti,intj); publicintsub(inti,intj); publicintmul(inti,intj); publicintdiv(inti,intj); } packagecn.edu.sdau.aop; publicclassArithmeticCalculatorImplimplementsArithmeticCalculator{ @Override publicintadd(inti,intj){ intresult=i+j; returnresult; } @Override publicintsub(inti,intj){ intresult=i-j; returnresult; } @Override publicintmul(inti,intj){ intresult=i*j; returnresult; } @Override publicintdiv(in

  • jQuery实现滚动条向下拉到一定的程度，然后这层就一直占着不管滚动条如何向下拉都不动了的效果

    <!DOCTYPEhtml> <html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>test</title> <style> *{ padding:0; margin:0; } #header{ position:fixed; top:0; left:0; height:30px; width:100%; background:#555; opacity:0.8; } #nav,.nav{ height:30px; width:100%; background:#000; opacity:0.8; } .fixed{ position:fixed; top:30px; left:0; } </style> </head> <body> <divid="header"></div> <divstyle="margin-

  • luogu P1843 奶牛晒衣服

    模拟T1，贪心+排序或者二分都行 贪心策略很好想，显然每次晒耗时最久的衣服最优，问题是要在每次晒完后都再次找到耗时最久的衣服，不能每次都sort，所以单调队列或者大根堆 二分也不难，直接二分时间，筛一遍衣服统计需要烘干的时间然后判断是否满足就行 模拟的时候敲了贪心+排序，所以这里放二分的代码（滑稽），个人感觉贪心更好写 #include<cstdio> #include<algorithm> #include<iostream> usingnamespacestd; intc[500005]; intn,a,b,i,j,k,y,l,r,m; boolcheck(intx) { k=0; for(i=1;i<=n;i++) { j=c[i]-a*m; if(j<=0)continue; y=j/b; if(j%b!=0)y++; k+=y; if(k>m)return0; } if(k<=m)return1; elsereturn0; } intmain() { cin>>n>>a>>b

  • 模块之time与datetime

    模块之time与datetime importtime print(time.clock()) print(time.process_time())#测量处理器运算时间 print(time.altzone)#返回utc时间差，以秒计算 print(time.asctime())#返回时间格式 print(time.localtime())#返回本地时间的structtime对象 print(time.gmtime(time.time()))#返回utc时间的struc时间，与中国本地时间相差8小时，中国是东八区。 print(time.asctime(time.localtime()))#返回时间格式 print(time.ctime())#返回时间格式，与上条相同 string_2_struct=time.strptime("2019/12/19","%Y/%m/%d")#将日期字符品转换成struct时间格式 print(string_2_struct) string_2_stamp=time.mktime(string_2_struct)#将struct时间对像转换成

  • 记一次黑页的编写

    <html> <head> <title>【此站被黑】－用我们的实力证明DIR溢出的距离</title> <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/> <STYLE> A{ COLOR:#ffffff;TEXT-DECORATION:none } A:hover{ COLOR:#6699cc;TEXT-DECORATION:underline } BODY { FONT-SIZE:9pt;SCROLLBAR-HIGHLIGHT-COLOR:buttonface;SCROLLBAR-SHADOW-COLOR: buttonface;SCROLLBAR-ARROW-COLOR:#cacab7;SCROLLBAR-FACE-COLOR:000033;SCROLLBAR-3DLIGHT-COLOR: buttonhighlight;SCROLLBAR-TRACK-COLOR:#f5f5f5;FONT-FAMILY:宋体;SCROLLBAR

  • LINUX 使用grep命令查看某个指定时间段的日志

      今天查看订单重复的问题，由于订单生成已经有一段时间了，所以我必须精准进行日志查询。开始用的是sed命令查询法，后来改成了grep查询，很方便。   命令：grep'时间''日志文件名' 复制 　 例如：我要查shop-bussiness.log.2018-11-06文件中2018年11月6号11：34至11点37之间的日志信息，可以这么做： grep'2018-Nov-0611:3[4-7]'shop-bussiness.log.2018-11-06复制   查出的结果如下图，结尾正好到37分：    

  • 请求转发并且把数据写在request传过去接收在显示出来

    importjava.io.IOException; importjavax.servlet.RequestDispatcher;importjavax.servlet.ServletException;importjavax.servlet.annotation.WebServlet;importjavax.servlet.http.HttpServlet;importjavax.servlet.http.HttpServletRequest;importjavax.servlet.http.HttpServletResponse; importcom.sun.net.httpserver.Authenticator.Success;//请求转发/***ServletimplementationclassLoginServlet*/@WebServlet("/LoginServlet.do")publicclassLoginServletextendsHttpServlet{ privatestaticfinallongserialVersionUID=1L;/***@seeHttp

  • Facebook团队关于网页缓存的再实践

    译者前言： 在8年之前，Yahoo团队曾经对网页中的缓存做了比较详尽的研究，但是随着互联网的高速发展，研究数据发生了一些变化。这篇文章主要是Facebook的web团队对现在缓存情况一些数据收集和研究。包括PC和移动端资源被缓存的时间以及资源在存在的时间。网页缓存是性能优化很重要的因素，值得一读。 能力有限，如有翻译错误的地方，欢迎随时找我交流，我会及时更正:)   正文： 网页加载速度是每个网站都应该重视的因素。但是往往被大家忽略。缓存是一个提升网站访问速度非常重要的因素（因为用户在下次访问的时候不需要重新计算或者下载已经缓存的资源） 我们团队（facebookweb团队）最近针对目前facebook.com没有缓存的现状进行了一番讨论，主要问题是：在facebook,.我们每天都会发布两个版本，怎么样才能令缓存更有效率？怎么样的缓存策略才适合我们？ 在找解决方案的时候，我们发现雅虎性能优化研究博客上已经有了一篇关于性能研究的文章。 但是令我们非常吃惊的是：20%的页面访问是在空缓存的情况下进行的。但是这个研究结果距离现在有8年了，那个时代刚发布IE7，jquery也刚发布

  • 3、 CSS规范

    1、代码格式化 样式书写一般有两种：一种是紧凑格式(Compact) .jdc{display:block;width:50px;}复制 一种是展开格式（Expanded） .jdc{ display:block; width:50px; }复制 团队约定：统一使用展开格式书写样式。2、代码大小写 样式选择器，属性名，属性值关键字全部使用小写字母书写，属性字符串允许使用大小写。 /*推荐*/ .jdc{ display:block; }复制 /*不推荐*/ .JDC{ DISPLAY:BLOCK; }复制   3、选择器 -尽量少用通用选择器`*`； -不使用ID选择器； -不使用无具体语义定义的标签选择器； /*推荐*/ .jdc{} .jdcli{} .jdclip{}复制 /*不推荐*/ *{} #jdc{} .jdcdiv{}复制   4、代码缩进统一使用四个空格进行代码缩进，使得各编辑器表现一致（各编辑器有相关配置） .jdc{ width:100%; height:100%; }复制   5、分号每个属性声明末尾都要

  • NCF 如何写微信支付中的APP支付

    简介 微信支付想必大家耳熟能祥，使用的地方太多了，今天我们用几分钟的时间来写一个微信支付的案例给到大家，希望大家能够使用NCF快速的对接APP支付 今天我们讲解到的是微信支付V2开发文档中的使用方法   参考文档 微信支付V2开发文档：https://pay.weixin.qq.com/wiki/doc/api/index.html NCF仓库地址：https://github.com/NeuCharFramework/NCF(要Star哦)   步骤 1.下载NCF 2.创建自己的XNCF模块 3.引用Nuget包ML.ThirdParty&ML.Common.SDK 4.建立自己的Controller，并创建接口方法 5.调用代码返回数据给前端 6.前端拿数据吊起支付   案例 1.直接到Github上下载NCF的源码master分支 2.请参考NCF开发文档中的创建XNCF模块 3.项目中引入 1<ItemGroup> 2<PackageReferenceInclude="ML.Common.SDK"Version="1.

  • 开发环境准备之 Selenium in Python

    tags:开发环境,Selenium,Python 安装Selenium包 pipinstall-Uselenium 安装浏览器Driver 我选择的是ChromeDriver（安装参考） 下载ChromeDriver 复制chromedrive文件到GoogleChrome程序目录下。 Python代码里创建webdriver对象时传递路径 复制 chromedriver="/Applications/GoogleChrome.app/Contents/MacOS/chromedriver" browser=webdriver.Chrome(chromedriver)``` 参考资源 Selenium官网：http://www.seleniumhq.org/ seleniuminpython教程：http://selenium-python.readthedocs.io/ seleniumpackageAPI:https://seleniumhq.github.io/selenium/docs/api/py/index.html [正文结束] [更新记录] 201

  • 7-2 幼儿园数学题（29 分）

    我系渣渣辉，我在梦工厂等你，是兄弟就来砍我啊！！ 刚上幼儿园的渣渣辉迷上了一款名叫贪玩蓝月的新游戏，由于过于沉迷游戏，上课听讲的效率直线下降。 今天，他的数学老师给他布置了一道求解二元一次方程组的题目，贪玩的他只记下的方程组的一个等式 ax+by=c,他知道一个二元方程是无法求出正确答案的，于是决定在满足此方程且x,y均为非负整数的前提下， 随机选一组x，y作为最后的答案，请聪明的你帮渣渣辉小朋友找出所有的满足条件的x,y组合个数。 输入格式: 输入只有一行，一行3个数字a,b,c（1<=a,b,c<=10000000） 输出格式: 输出只有一行，满足条件的x,y组合个数ans。 输入样例: 在这里给出一组输入。例如： 2316 复制 输出样例: 在这里给出相应的输出。例如： 3一开始想用暴力，后来超时，然后改为二分查找，还是超时，后来发现，第二个for循环可以直接用一个if代替。FirstTry：复制 1#include<iostream> 2#include<algorithm> 3#include<string> 4#includ

相关推荐

推荐阅读