李珣动态爱心代码教程
作为一个学计算机的小白,在网上看了人家写的代码,感觉是非常beatiful,在这给非计算机专业的兄弟们教一下怎么拿代码哄女朋友,不用安装任何软件,只要一台电脑欧克,俗话说行家看是傻子操作,外行一看,我nia nia 真他****厉害,废话不多,看下面傻瓜式教学
第一步,先在桌面建一个文本文档,随便写个名字,如图所示
第二步,打开此文档将下面代码复制粘进去
-
-
<html>
-
<head>
-
<meta charset="utf-8">
-
<title>HTML5 Canvas爱心表白动画特效DEMO演示</title>
-
-
<style>
-
html, body {
-
height: 100%;
-
padding: 0;
-
margin: 0;
-
background: #000;
-
}
-
canvas {
-
width: 100%;
-
height: 100%;
-
}
-
</style>
-
-
</head>
-
<body>
-
-
<div style="text-align:center;clear:both;">
-
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
-
<script src="/follow.js" type="text/javascript"></script>
-
</div>
-
-
<canvas id="pinkboard"></canvas>
-
-
<script>
-
var settings = {
-
particles: {
-
length: 500,
-
duration: 2,
-
velocity: 100,
-
effect: -0.75,
-
size: 30,
-
},
-
};
-
-
(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)}}}());
-
-
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;
-
})();
-
-
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;
-
})();
-
-
var ParticlePool = (function() {
-
var particles,
-
firstActive = 0,
-
firstFree = 0,
-
duration = settings.particles.duration;
-
-
function ParticlePool(length) {
-
particles = 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);
-
-
firstFree ;
-
if (firstFree == particles.length) firstFree = 0;
-
if (firstActive == firstFree ) firstActive ;
-
if (firstActive == particles.length) firstActive = 0;
-
};
-
ParticlePool.prototype.update = function(deltaTime) {
-
var i;
-
-
if (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);
-
}
-
-
while (particles[firstActive].age >= duration && firstActive != firstFree) {
-
firstActive ;
-
if (firstActive == particles.length) firstActive = 0;
-
}
-
-
-
};
-
ParticlePool.prototype.draw = function(context, image) {
-
if (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;
-
})();
-
-
(function(canvas) {
-
var context = canvas.getContext('2d'),
-
particles = new ParticlePool(settings.particles.length),
-
particleRate = settings.particles.length / settings.particles.duration, // particles/sec
-
time;
-
-
function 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
-
);
-
}
-
-
var image = (function() {
-
var canvas = document.createElement('canvas'),
-
context = canvas.getContext('2d');
-
canvas.width = settings.particles.size;
-
canvas.height = settings.particles.size;
-
function 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;
-
}
-
context.beginPath();
-
var t = -Math.PI;
-
var point = to(t);
-
context.moveTo(point.x, point.y);
-
while (t < Math.PI) {
-
t = 0.01;
-
point = to(t);
-
context.lineTo(point.x, point.y);
-
}
-
context.closePath();
-
<!-- 粉色#ea80b0-->
-
context.fillStyle = '#228B22';
-
context.fill();
-
-
var image = new Image();
-
image.src = canvas.toDataURL();
-
return image;
-
})();
-
-
function render() {
-
requestAnimationFrame(render);
-
-
var newTime = new Date().getTime() / 1000,
-
deltaTime = newTime - (time || newTime);
-
time = newTime;
-
-
context.clearRect(0, 0, canvas.width, canvas.height);
-
-
var 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);
-
}
-
-
particles.update(deltaTime);
-
particles.draw(context, image);
-
}
-
-
function onResize() {
-
canvas.width = canvas.clientWidth;
-
canvas.height = canvas.clientHeight;
-
}
-
window.onresize = onResize;
-
-
setTimeout(function() {
-
onResize();
-
render();
-
}, 10);
-
})(document.getElementById('pinkboard'));
-
-
</script>
-
<a href="https://nmdvd.top/vod-detail-id-40264.html" target="_blank">
-
<p>只要我没对象,你们得到的心就是绿的,</p>
-
<p>往上翻代码提示有粉色代码,点击这行字跳转高清影视观看 点燃我,温暖我</p>
-
</a>
-
</br>
-
</br>
-
</br>
-
</body>
-
</html>
第三步,点击左上角文件,单击另存为,将文件名改为(你的文件名.html(一定要点点))如我的(李珣爱心代码.html),然后保存类型选择所有文件
保存完成后会出现浏览器图标,如下:
最后双击该图标,就可以看到你想看动态爱心啦
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgekhjc
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01