言:每当过节的时候,女朋友就抱怨我总是忘记给她买花,说程序不懂浪漫,这不我准备了几款爱心动画特效,打算当面向她表达一下。
寓意:告白无须多么华丽的语言,一颗颗小的爱心汇聚成一颗真心,让你的另一半感受到浓浓的爱意。
代码难度系数★★★
新建index.html,复制以下代码保存在浏览器中打开即可。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>canvas 心</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 particles
duration: 2, // particle duration in sec
velocity: 100, // particle velocity in pixels/sec
effect: -0.75, // play with this for a nice effect
size: 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 pool
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);
// handle circular queue
firstFree++;
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 particles
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);
}
// remove inactive particles
while (particles[firstActive].age >= duration && firstActive != firstFree) {
firstActive++;
if (firstActive == particles.length) firstActive = 0;
}
};
ParticlePool.prototype.draw = function(context, image) {
// draw active particles
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;
})();
/*
* 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/sec
time;
// get point on heart with -PI <= t <= PI
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
);
}
// creating the particle image using a dummy canvas
var 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 path
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;
}
// create the path
context.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 fill
context.fillStyle = '#ea80b0';
context.fill();
// create the image
var image = new Image();
image.src = canvas.toDataURL();
return image;
})();
// render that thing!
function render() {
// next animation frame
requestAnimationFrame(render);
// update time
var newTime = new Date().getTime() / 1000,
deltaTime = newTime - (time || newTime);
time = newTime;
// clear canvas
context.clearRect(0, 0, canvas.width, canvas.height);
// create new particles
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);
}
// update and draw particles
particles.update(deltaTime);
particles.draw(context, image);
}
// handle (re-)sizing of the canvas
function onResize() {
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
}
window.onresize = onResize;
// delay rendering bootstrap
setTimeout(function() {
onResize();
render();
}, 10);
})(document.getElementById('pinkboard'));</script>
</body>
</html>
寓意:将想说的话打开一颗颗的爱心气球上,随着气球不断的升空,让整个氛围可更加地缠绵,看到此处可以有感动的泪水。
代码难度系数★★★
新建index.html,复制以下代码保存在浏览器中打开即可。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>情人节快乐:)</title>
<style>
canvas {
position: absolute;
top: 0;
left: 0;
}</style>
</head>
<body>
<canvas id=c></canvas>
<script>
var w = c.width = window.innerWidth,
h = c.height = window.innerHeight,
ctx = c.getContext( '2d' ),
opts = {
phrases: [ "Don't die\nit's not hard", "You're the Best", "Every day,\nYou're beautiful", "Every occasion,\nYou're clever", "A world without You?\nNah", "Keep kicking ass", "You're better than them,\nwhoever they are", "You're just amazing", "You are,\ntherefore I am", "Nothing better than You \ncould have happened to the world" ],
balloons: 10,
baseVelY: -1,
addedVelY: -1,
baseVelX: -.25,
addedVelX: .5,
baseSize: 20,
addedSize: 10,
baseSizeAdder: 2,
addedSizeAdder: 2,
baseIncrementer: .01,
addedIncrementer: .03,
baseHue: -10,
addedHue: 30,
font: '15px Verdana'
},
cycle = 0,
balloons = [];
ctx.font = opts.font;
function Balloon(){
this.reset();
}
Balloon.prototype.reset = function(){
this.size = opts.baseSize + opts.addedSize * Math.random();
this.sizeAdder = opts.baseSizeAdder + opts.addedSizeAdder * Math.random();
this.incrementer = opts.baseIncrementer + opts.addedIncrementer * Math.random();
this.tick = 0;
this.x = Math.random() * w;
this.y = h + this.size;
this.vx = opts.baseVelX + opts.addedVelX * Math.random();
this.vy = opts.baseVelY + opts.addedVelY * Math.random();
this.color = 'hsla(hue,70%,60%,.8)'.replace( 'hue', opts.baseHue + opts.addedHue * Math.random() );
this.phrase = opts.phrases[ ++cycle % opts.phrases.length ].split( '\n' );
this.lengths = [];
for( var i = 0; i < this.phrase.length; ++i )
this.lengths.push( -ctx.measureText( this.phrase[ i ] ).width / 2 );
}
Balloon.prototype.step = function(){
this.tick += this.incrementer;
this.x += this.vx;
this.y += this.vy;
var size = this.size + this.sizeAdder * Math.sin( this.tick );
ctx.lineWidth = size / 40;
ctx.strokeStyle = '#eee';
ctx.beginPath();
ctx.moveTo( this.x, this.y - 2 );
ctx.lineTo( this.x, this.y + size );
ctx.stroke();
ctx.fillStyle = this.color;
ctx.translate( this.x, this.y );
ctx.rotate( Math.PI / 4 );
//ctx.fillRect( -size / 2, -size / 2, size / 2, size / 2 );
ctx.beginPath();
ctx.moveTo( 0, 0 );
ctx.arc( -size / 2, -size / 2 + size / 4, size / 4, Math.PI / 2, Math.PI * 3 / 2 );
ctx.arc( -size / 2 + size / 4, -size / 2, size / 4, Math.PI, Math.PI * 2 );
ctx.lineTo( 0, 0 );
ctx.fill();
ctx.rotate( -Math.PI / 4 );
ctx.translate( -this.x, -this.y );
ctx.translate( this.x, this.y + size + 15 );
ctx.scale( size / this.size, size / this.size );
ctx.fillStyle = '#eee';
for( var i = 0; i < this.phrase.length; ++i )
ctx.fillText( this.phrase[ i ], this.lengths[ i ], i * 15 );
ctx.scale( this.size / size, this.size / size );
ctx.translate( -this.x, -( this.y + size + 15 ) );
if( this.y < -size * 3 )
this.reset();
}
function anim(){
window.requestAnimationFrame( anim );
ctx.fillStyle = '#222';
ctx.fillRect( 0, 0, w, h );
if( balloons.length < opts.balloons && Math.random() < .01 )
balloons.push( new Balloon );
for( var i = 0; i < balloons.length; ++i )
balloons[ i ].step();
}
anim();</script>
</body>
</html>
寓意:天空中下起了爱心雨,衬托的房间变得温暖,也让整个场景都变得温馨无比,想必此时可以有一个大大的拥抱。
代码难度系数★★★
代码有image、js和html,所以不好贴出来,有需要的朋友直接问我要吧。
总结:程序员的工作本身就很枯燥,特定找了几个好看的特效拿出来和大家分享,希望大家能够快乐每一天,上述代码亲测可用,欢迎点赞收藏。
《完》
大家如果喜欢的话麻烦点赞、关注、转发,谢谢大家。
人节送礼是一件堪比扫雷还要惊险的烧脑游戏,一步错就会步步错。我们总结了一份区块链版情人节好评率高的礼物清单,区块链具有永久保存、不可篡改的特点,真的是像极了爱情。这是一份大数据检验过的清单,别犹豫,送就完事了。
NO 1 :2019年1月29日下午,美籍韩裔男孩Adolphus与中国女孩Serena在丘比特DAPP上亲手操作,Adolphus输入“My heart is full of love,because of you”,向Serena表达爱意,两人共同喊出“上链的爱是真爱”,丘比特方宣称完成了人类的首次爱情上链。
NO 2:福州三坊七巷出现了一棵区块链爱情树,情侣们可以将照片和甜言蜜语通过小程序上传到区块链。情侣们只需要用支付宝扫描树上的二维码,进入区块链爱情树小程序,就可以将照片和爱情宣言上传到区块链上获得“区块链爱情证书”,用数字来纪录生活和爱情。
NO 3:2016年6月14日,一位名叫孙春雨的区块链爱好者把他向心爱女子的求婚请求记录在了比特币区块链高度为 416236 的区块链上,之后女孩又把回答答复在了区块链上。
NO 4:2014年,美国的大卫蒙德鲁斯和乔伊斯把约在佛罗里达州奥兰多迪士尼世界的私人比特币会议上举行了第一个区块链婚礼,省略了宗教和政府官员的角色。这对新婚夫妇还把婚礼誓言记录在区块链上:生命不是永恒的,死亡可以分开我们,但是Blockchain是永远的。
区块链技术为爱情带来了更好更巧妙的表达方式。区块链+爱情的应用场景,也已经逐步出现在大众的视野里。区块链的各种场景也在加速落地,不光是在爱情上,也包括其他的领域。
趣链科技作为行业内应用落地场景最为丰富的企业之一,涉及生活的方方面面,在十多个领域中都有相关解决方案。
社会公共领域里,趣链与某银行共同开发公积金数据共享平台,覆盖全国数百家公积金中心,日上链超过千万条数据;联合杭州互联网公证处基于区块链技术共同研发的公证摇号平台,支持3万余人参与。
趣链一直在不断的探索区块链应用的边界,希望把体系建立在线上之外,继续扩展到医疗、扶贫、租赁等多个场景,实现区块链技术回归真实的价值。
和趣链一起做有趣的链。由趣链发起的“趣开发,赢未来”的区块链开发者大赛正在火热报名ing ! 想要花钱秀恩爱的朋友们注意了,趣链将送出百万奖金,不要再让女朋友羡慕别人家的男朋友了!
参赛团队需将参赛作品(概念PPT、产品原型、程序、演示视频等)发送至大赛的官方邮箱pioneer@hyperchain.cn,大赛组委会将从“应用场景、技术价值、商业价值、产品设计”四个维度评审出30组优秀项目于8月23日公布并送出价值8000元的开发者福袋。
报名网址:https://filoop.com/activity.html,或添加大赛小助手微信18458407117进行报名。
ava程序员的情书
我能抽象出整个世界,
但是我不能抽象出你,
因为你在我心中是那么的具体,
所以我的世界并不完整。
我可以重载甚至覆盖这个世界里的任何一种方法,
但是我却不能重载对你的思念。
也许命中注定了 你在我的世界里永远的烙上了静态的属性,
而我不慎调用了爱你这个方法。
当我义无返顾的把自己作为参数传进这个方法时,
我才发现爱上你是一个死循环,
它不停的返回对你的思念压入我心里的堆栈。
在这无尽的黑夜中,
我的内存里已经再也装不下别人,
我不停的向系统申请空间,
但却捕获一个异常---我爱的人不爱我。
为了解决这个异常,
我愿意虚拟出最后一点内存,
把所有我能实现的方法地址压入堆栈,
并且在栈尾压入最后一个方法---将字符串"我爱你,你爱我吗?"传递给你。
如果返回值为真--我将用尽一生去爱你,
否则--我将释放掉所有系资源!
C++程序员的情书
茫茫内存里,你我不曾相见;
寥寥代码中,命运注定良缘;
当编译开始,我们齐手共建;
—— 中国软件的春天
虽然我们是不同的对象,都有隐私的一面,
但我相信你会找到我的接口,把我的最真给你看!
以为我是你的指针,在茫茫内存的堆栈中,
永远指向你那片天空,不孜不倦!
我愿做你的内联,供你无限次的调用,直到海枯石烂!
我愿做你的引用,和你同进退共生死,一起经受考验!
只是我不愿苦苦地调试你的心情,最终沦为你的友元!
而我更不愿始乱终弃,删不清借你用的空间,
最后一拍两散,搞的内存混乱。
如今我们已被 MFC 封装——事事变迁!
如今我们已向 COM 走去——可想当年!
不知你可曾记得那已经褪色却仍然绽放光芒的三个字:
std::cout<<”我”<<”爱”<<”你”<
前端程序员的情书
窗外,雨敲残枝
窗内,荧光灯和电脑屏幕交汇映影
某一刻
当键盘的清脆声音戛然而止
是因为我突然想起了你
我幼稚的想用 new 这个关键字把你定义成我的对象
但我压缩了自己的爱
因为我没有这个勇气去并肩你的 z-index
我没有 php 的稳定强大,也没有 photoshop 的光鲜亮丽
于是我努力重构自己,希望能够与你匹配
也许用 javascript 可以抽象出整个世界
但是始终我不能抽象出你
也许用 canvas 可以构建出绚烂极致的画面
但是构建不出你的一丝美丽
因为你在我心中是那么的具体
所以我的世界并不完整
我可以继承甚至覆盖这个 ECMAScript 里的任何一种方法
但是我却不能覆盖对你的思念
我可以 cltr+c 克隆任何一份代码
但这个世界再也找不到另一个你
也许命中注定了 你在我的世界里永远的烙上了静态的属性
而我不慎在 love 这个 dom 上调用了 you( ) 这个方法
当我义无返顾的把 i 作为参数传进这个方法时
我才发现爱上你是一个递归函数
让我进入了死循环
它不停的return对你的思念
将压入我心里的堆栈
在这无尽的黑夜中
我的内存里已经再也装不下别人
对你的思恋
却只能放在 console 里面
当网站顽强的抵挡住了 DDOS 的攻击,
却因为你的一个回眸,却轰然崩塌,
我胆怯地用 ajax 异步打听你的消息
却返回一行 404 的数字
原来你并不是开源的
惊愕,抑思
我试图用 $.each 去遍历整个世界
却始终找不到你
我不停的打出一个个断点,不停地跨域请求资源,不停的 try catch
最后却捕获一个异常
error‘她不爱我’
为了解决这个异常
我彻夜的思索,辗转反侧
你我并不在同一个维度
累了,罢了
疲惫的我 阴影中的我
在 window.close 的时候,传入最后一个方法
将 !!doYouLoveMe?传递给你
如果返回值为 true
我会释放所有的资源,格式化所有的硬盘
因为我不会在 coding
我用一生去 loving
数据库版情书
每次你微笑的看着我,都会引发使我心跳加速的 trigger,我发现自己已深深地爱上了你,无法逃避,因为我们在同一个 Database 里。
经过我长期的查询分析,对你表结构的了解也越来越清晰,你温柔美丽,高雅贤淑,简直就是我心目中的 BCD。
我多想 JOIN 你,但找不到合适的 ID。
IF 你能和我在一起,你就是我的 unique,我决不会三心二意,去找其他的 foreign key。
为了你,我会 DELETE 自己所有的坏脾气,也会时常 UPDATE 自己。
你交给我的 transaction,无论 error 等于几,我都会 commit,尽心尽力。
我会紧紧地 FETCH 我们在一起的美好回忆,将它变成加密的存储过程,而不是转瞬即逝的 tempdb。
我将这份日志 sp_sendmail 给你,向你 declare 了我的心意。
如果你 set nocount off,我就认为你 default 了我们的实体关系,不要再犹豫迟疑,相信自己的 select,我一定会爱你,直到系统死机。
让我们挑一个服务器空闲的日子,参加批处理婚礼,由 sa 为我们见证,从此紧紧地 union 在一起,永不分离,共同 create 一片美好的新天地。
祝:MIN(烦恼),MAX(美丽)!
*请认真填写需求信息,我们会在24小时内与您取得联系。