生活随笔
收集整理的這篇文章主要介紹了
【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
>
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
, 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();context
.fillStyle
= '#ea80b0';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
></body
>
</html
>
【修改】
看到其他平臺還有跳動的，我不允許你不會
簡單還是原來的代碼，只不過要修改style
修改部分代碼如下：
<style
>
html
,
body
{height: 100%;padding: 0;margin: 0;background: #
000;display: flex
;justify
-content
: center
;align
-items
: center
;
}@keyframes scaleDraw
{0% {transform: scale(1);}25% {transform: scale(1.3);}50% {transform: scale(1);}75% {transform: scale(1.3);}
}canvas
{position: absolute
;width: 50%;height: 50%;-webkit
-animation
-name
: scaleDraw
;-webkit
-animation
-timing
-function: ease
-in-out
;-webkit
-animation
-iteration
-count
: infinite
;-webkit
-animation
-duration
: 3s
;
}
</style
>
【讀者反饋】
看了評論，有人人不知道怎么用這個代碼實現效果
我來寫一下
1.首先在你的桌面新建 index.txt文件
2. 然后打開這個新建的文件，粘貼我的代碼-保存
3.最后修改文件后綴為.html （這個地方一定要是 .html 后綴） 然后雙擊打開即可。。
完結，撒花~
總結
以上是生活随笔為你收集整理的【html】理工男李峋的极致浪漫：爱心代码｜和你的心跳同频共振的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
