HTML做個無法拒絕的表白，女神都不會拒絕，情人節的時候趕緊發朋友圈吧！

大家想不想先看看效果呢？下圖就是效果

怎麽樣？好不好看？想不想要代碼？廢話不多説，上代碼！

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无法拒绝的表白</title><style>
html, body {height: 100%;padding: 0;margin: 0;background: #000;
}
canvas {position: absolute;width: 100%;height: 100%;
}</style>
</head>
<body><canvas id="pinkboard"></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.manyuan.ltd

這個手機版表白愛心和電腦版一樣，點擊鏈接就能看。

HTML做個無法拒絕的表白，女神都不會拒絕，情人節的時候趕緊發朋友圈吧！相关推荐

gtav登录请确认不是机器人_GTA5線上被誤封號申訴方法【註：網站填表現在已經無法解封了，因為都是機器人自動回覆】...
最近正版被誤封的情況出現的非常嚴重undefined,有的剛剛購買了遊戲,上線才玩1個小時都沒有,就被封號了 ,對此玩家表示很無奈.去百度搜索解封方法,給的答案都是一樣的 --去申訴網站「https: ...
修復Windows無法存取指定的裝置路徑或檔案
如果您遇到" Windows無法存取指定的裝置.路徑或檔案.您可能沒有適當的權限,所以無法存取項目"的問題,則您可能面臨Windows權限錯誤.本文是關於解決這個問題詳細方法. 為 ...
python安装django找不到set.up_Python django LRS無法設置。找不到文件錯誤
I am using ADL LRS to setup a LRS(Learning Record Store) system for my own use. It uses TIN CAN API. ...
(原創) 如何解決DE2_LCM_CCD上下顛倒左右相反與無法設定曝光值的問題? (SOC) (DE2)...
AbstractDE2_LCM_CCD是友晶科技為DE2和其130萬像素CMOS與彩色LCD所寫的範例,但官方的範例會造成上下顛倒左右相反與曝光值無法設定的問題,本文提出解決方式. Introduct ...
IE 無法開啟網際網路網站的框框http://www.facebook.com/home.php?操作已中止
Windows Internet Explorer 7 中的組態設定可能會造成一種或多種下列問題: 您會遭遇效能問題在 Internet Explorer 7. 您在 Internet Explore ...
win2003的IIS無法使用,又一次安裝提示找不到iisadmin.mfl文件
我的系統是win2003 繁體版 sp2,現在iis無法使用,我同事的也是,也不知道是不是跟在網域中有關係,因為我用虛擬機的繁體系統win2003 R2版iis能够正常使用,不過曾经那台電腦也是在網域 ...
android sd media rw,Android 外部SD卡/U盤無法寫入解決方法（需要root）
但今天我遇到一個問題,就是我買了只TF卡裝上去以后發現:一般程序無法寫入TF卡,而系統自帶的文件工具能夠寫入. 什么原因呢? 好在這個平板已經是root的,馬上調出rootexplorer文件管理器查 ...
SD 格式化錯誤提示Windows無法完成格式化
如果您的SD 格式化出錯並提示您"Windows無法完成格式化"錯誤怎麼辦?這篇文章將為您找到有關此問題的原因和解決方案.另外,如果因記憶卡故障而造成的資料丟失,您可以用記憶卡修復 ...
在mtk移植个linux内核,移植 Linux Kernel 造成無法開機之解決方案以及除錯工具
一般在以下情況, 我們會進行移植 Linux Kernel 的動作. 1. 將新版 Linux Kernel 移植到全新 SoC 上開發人員為 SoC 廠商(e.g. MTK, TI, Allwin ...

HTML做個無法拒絕的表白，女神都不會拒絕，情人節的時候趕緊發朋友圈吧！

HTML做個無法拒絕的表白，女神都不會拒絕，情人節的時候趕緊發朋友圈吧！相关推荐

最新文章

热门文章