Cách code hình trái tim giống với nhân vật Thủ Khoa Lý

Code trái tim thủ khoa Lý đang hot rần rần trở lại trên mạng xã hội. Nhân vật Thủ Khoa Lý (Lý Tuân) trong phim “Chiếc Bật Lửa Và Váy Công Chúa” hay còn có tên gọi là “Thắp sáng anh, sưởi ấm em” đã dùng code để lập trình, vẽ ra một trái tim màu hồng đầy ngọt ngào để gửi tới crush của mình là Chu Vận (Trương Tịnh Nghi). Cùng chúng tôi code trái tim thủ khoa Lý siêu đơn giản với nhiều giao diện độc đáo bên dưới. Mỗi mẫu hình trái tim chúng tôi để cập nhật thêm các dòng code để độc giả chỉ cần copy về và sử dụng là được thôi nhé!

Code trái tim cơ bản

Code trái tim cơ bản là cách code đơn giản nhất, trái tim chỉ xuất hiện màu hồng mà không có thêm chữ bên trong. Các bạn có thể thực hiện theo lệnh bên dưới:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>

<HTML>

<HEAD>

<TITLE> Heart </TITLE>

<style>

html, body {

height: 100%;

padding: 0;

margin: 0;

background: black;

}

canvas {

position: absolute;

width: 100%;

height: 100%;

}

</style>

</HEAD>

<BODY>

* 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

* 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’));

var colours=new Array(‘#f00’, ‘#f06’, ‘#f0f’, ‘#f6f’, ‘#f39’, ‘#f9c’); // colours of the hearts

var minisize=10; // smallest size of hearts in pixels

var maxisize=20; // biggest size of hearts in pixels

var hearts=100; // maximum number of hearts on screen

var over_or_under=”over”; // set to “over” for hearts to always be on top, or “under” to allow them to float behind other objects

/*****************************

*JavaScript Love Heart Cursor*

* http://www.mf2fm.com/rv *

* DON’T EDIT BELOW THIS BOX *

*****************************/

var x=ox=400;

var y=oy=300;

var swide=800;

var shigh=600;

var sleft=sdown=0;

var herz=new Array();

var herzx=new Array();

var herzy=new Array();

var herzs=new Array();

var kiss=false;

if (typeof(‘addRVLoadEvent’)!=’function’) function addRVLoadEvent(funky) {

var oldonload=window.onload;

if (typeof(oldonload)!=’function’) window.onload=funky;

else window.onload=function() {

if (oldonload) oldonload();

funky();

}

addRVLoadEvent(mwah);

function mwah() { if (document.getElementById) {

var i, heart;

for (i=0; i<hearts; i++) {

heart=createDiv(“auto”, “auto”);

heart.style.visibility=”hidden”;

heart.style.zIndex=(over_or_under==”over”)?”1001″:”0″;

heart.style.color=colours[i%colours.length];

heart.style.pointerEvents=”none”;

if (navigator.appName==”Microsoft Internet Explorer”) heart.style.filter=”alpha(opacity=75)”;

else heart.style.opacity=0.45;

heart.appendChild(document.createTextNode(String.fromCharCode(9829)));

document.body.appendChild(heart);

herz[i]=heart;

herzy[i]=false;

}

set_scroll();

set_width();

herzle();

}}

function herzle() {

var c;

if (Math.abs(x-ox)>1 || Math.abs(y-oy)>1) {

ox=x;

oy=y;

for (c=0; c<hearts; c++) if (herzy[c]===false) {

herz[c].firstChild.nodeValue=String.fromCharCode(9829);

herz[c].style.left=(herzx[c]=x-minisize/2)+”px”;

herz[c].style.top=(herzy[c]=y-minisize)+”px”;

herz[c].style.fontSize=minisize+”px”;

herz[c].style.fontWeight=’normal’;

herz[c].style.visibility=’visible’;

herzs[c]=minisize;

break;

}

for (c=0; c<hearts; c++) if (herzy[c]!==false) blow_me_a_kiss(c);

setTimeout(“herzle()”, 30);

}

document.onmousedown=pucker;

document.onmouseup=function(){clearTimeout(kiss);};

function pucker() {

ox=-1;

oy=-1;

kiss=setTimeout(‘pucker()’, 100);

}

function blow_me_a_kiss(i) {

herzy[i]-=herzs[i]/minisize+i%2;

herzx[i]+=(i%5-2)/5;

if (herzy[i]<sdown-herzs[i] || herzx[i]<sleft-herzs[i] || herzx[i]>sleft+swide-herzs[i]) {

herz[i].style.visibility=”hidden”;

herzy[i]=false;

}

else if (herzs[i]>minisize+1 && Math.random()<2.5/hearts) break_my_heart(i);

else {

if (Math.random()<maxisize/herzy[i] && herzs[i]<maxisize) herz[i].style.fontSize=(++herzs[i])+”px”;

herz[i].style.top=herzy[i]+”px”;

herz[i].style.left=herzx[i]+”px”;

}

function break_my_heart(i) {

var t;

herz[i].firstChild.nodeValue=String.fromCharCode(9676);

herz[i].style.fontWeight=’bold’;

herzy[i]=false;

for (t=herzs[i]; t<=maxisize; t++) setTimeout(‘herz[‘+i+’].style.fontSize=”‘+t+’px”‘, 60*(t-herzs[i]));

setTimeout(‘herz[‘+i+’].style.visibility=”hidden”;’, 60*(t-herzs[i]));

}

document.onmousemove=mouse;

function mouse(e) {

if (e) {

y=e.pageY;

x=e.pageX;

}

else {

set_scroll();

y=event.y+sdown;

x=event.x+sleft;

}

window.onresize=set_width;

function set_width() {

var sw_min=999999;

var sh_min=999999;

if (document.documentElement && document.documentElement.clientWidth) {

if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;

if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;

}

if (typeof(self.innerWidth)==’number’ && self.innerWidth) {

if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;

if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;

}

if (document.body.clientWidth) {

if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;

if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;

}

if (sw_min==999999 || sh_min==999999) {

sw_min=800;

sh_min=600;

}

swide=sw_min;

shigh=sh_min;

}

window.onscroll=set_scroll;

function set_scroll() {

if (typeof(self.pageYOffset)==’number’) {

sdown=self.pageYOffset;

sleft=self.pageXOffset;

}

else if (document.body && (document.body.scrollTop || document.body.scrollLeft)) {

sdown=document.body.scrollTop;

sleft=document.body.scrollLeft;

}

else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {

sleft=document.documentElement.scrollLeft;

sdown=document.documentElement.scrollTop;

}

else {

sdown=0;

sleft=0;

}

function createDiv(height, width) {

var div=document.createElement(“div”);

div.style.position=”absolute”;

div.style.height=height;

div.style.width=width;

div.style.overflow=”hidden”;

div.style.backgroundColor=”transparent”;

return (div);

}

// ]]>

</script>

</BODY>

</HTML>

Nếu bạn muốn đổi trái tim thành màu khác thì có thể tìm dòng code: context.fillStyle = ‘#FFFF00’ sau đó đổi mã màu #FFFF00 thành màu khác. Chẳng hạn như:

Màu đỏ: #FF0000
Màu xanh lá cây: #00FF00
Xanh blue: #0000FF
Màu vàng: #FFFF00
Xanh nước biển: #00FFFF

Code trái tim đập chèn hình ảnh

Hiệu ứng trái tim đập, ánh sáng xung quanh và hình ảnh của crush, các cặp đôi… là một trong những cách code trái tim thủ khoa Lý được ưa chuộng nhất hiện nay.

Tạo hình ảnh đẹp với hình trái tim bên ngoài sẽ cần hình ảnh. Nếu bạn chưa có nhiều kinh nghiệm để thực hiện có thể vào: https://taoanhdep.com/cong-cu/tao-ma-code-trai-tim-co-anh-va-chu/ sau đó tải hình ảnh lên, chọn dòng chữ bạn muốn thêm vào ảnh và nhấn “Tạo code”.

Lúc này một đoạn code đã được hình thành để bạn copy code một cách nhanh chóng và đơn giản.

Code trái tim đập của Thủ Khoa Lý không tên

Code trái tim đập của thủ khoa Lý không tên là kiểu code trái tim cơ bản. Bạn có thể dùng các dòng lệnh của code trái tim cơ bản mà chúng tôi chia sẻ ở trên. Về màu sắc, nếu không thích màu hồng, bạn có thể đổi sang các màu sắc khác.

Nếu bạn muốn đổi trái tim thành màu khác thì có thể tìm dòng code: context.fillStyle = ‘#FFFF00’ sau đó đổi mã màu #FFFF00 thành màu khác. Chẳng hạn như:

Màu đỏ: #FF0000
Màu xanh lá cây: #00FF00
Xanh blue: #0000FF
Màu vàng: #FFFF00
Xanh nước biển: #00FFFF

Muốn nhiều màu sắc hơn, bạn có thể truy cập vào bảng mã màu HTML để chọn các quy ước về màu và thay đổi để tạo nên các trái tim với màu sắc như mình mong muốn.

Code trái tim đập của Thủ Khoa Lý có tên

Trái tim đập của Thủ Khoa Lý có tên sẽ giúp bạn thể hiện được nhiều thông điệp hơn. Chúng ta có thể thêm tên của người yêu vào bên trong hình trái tim. Hoặc có thể thêm I Love You, Anh yêu Em cùng nhiều thông điệp khác. Muốn code trái tim đập của Thủ Khoa Lý có tên bạn có thể thực hiện theo các dòng lệnh bên dưới:

<style>

html, body {

height: 100%;

padding: 0;

margin: 0;

background: #000;

display: flex;

justify-content: center;

align-items: center;

}

.box {

width: 100%;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

display: flex;

flex-direction: column;

}

canvas {

position: absolute;

width: 100%;

height: 100%;

}

#pinkboard {

position: relative;

margin: auto;

height: 500px;

width: 500px;

animation: animate 1.3s infinite;

}

#pinkboard:before, #pinkboard:after {

content: ”;

position: absolute;

background: #FF5CA4;

width: 100px;

height: 160px;

border-top-left-radius: 50px;

border-top-right-radius: 50px;

}

#pinkboard:before {

left: 100px;

transform: rotate(-45deg);

transform-origin: 0 100%;

box-shadow: 0 14px 28px rgba(0,0,0,0.25),

0 10px 10px rgba(0,0,0,0.22);

}

#pinkboard:after {

left: 0;

transform: rotate(45deg);

transform-origin: 100% 100%;

}

@keyframes animate {

0% {

transform: scale(1);

}

30% {

transform: scale(.8);

}

60% {

transform: scale(1.2);

}

100% {

transform: scale(1);

}

</style>

</HEAD>

<BODY>

</div>

* Settings

var settings = {

particles: {

length: 2000, // maximum amount of particles

duration: 2, // particle duration in sec

velocity: 100, // particle velocity in pixels/sec

effect: -1.3, // play with this for a nice effect

size: 13, // particle size in pixels

};

* RequestAnimationFrame polyfill by Erik Möller

* 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 = ‘#FF5CA4’;

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>

<div class=”center-text”,

style=”background-color:rgb(0, 0, 0);

width: 100%;

color: rgb(225, 12, 168);

height:100%;

font-size: 31px;

font-style: italic;

display: flex;

align-items: center;

justify-content: center;

margin-bottom: 5px;

text-align: center;”>Anh Yêu Em</div>

</BODY>

</HTML>

Ở dòng code cuối cùng: text-align: center;”>Anh Yêu Em</div> bạn có thể thay thế bằng các cụm từ khác. Muốn thông điệp nào hãy thay thế vào cụm từ Anh Yêu Em là được.

Code trái tim đập tia sáng nghệ thuật

Trái tim đập tia sáng nghệ thuật mang đến một cảm giác mới lạ và huyền bí hơn. Nếu bạn muốn một trái tim màu đỏ với những tia sáng thay đổi liên tục để tạo sự mới lạ hơn so với các phiên bản trái tim khác thì hãy chọn đoạn code mà chúng tôi chia sẻ bên dưới:

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

canvas {

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

background-color: rgba(0, 0, 0, .2);

}

</style>

</head>

<body>

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>

</body>

</html>

Code trái tim đập màu đỏ

Mẫu trái tim đập màu đỏ có thêm nhiều hiệu ứng đẹp mắt sẽ mang đến cảm giác của một tình yêu nồng cháy dành cho người mình yêu. Với mẫu hình trái tim này khi chèn thêm âm thanh, các bài hát về tình yêu sẽ càng trở nên đẹp hơn. Bạn có thể thực hiện mẫu trái tim đỏ theo các dòng code bên dưới:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>

<HTML>

<HEAD>

<style>

html, body {

height: 100%;

padding: 0;

margin: 0;

background: rgba(0, 0, 0, 0.851);

}

canvas {

position: absolute;

width: 100%;

height: 100%;

}

</style>

</HEAD>

<BODY>

</div>

var settings = {

particles: {

length: 10000, // maximum amount of particles

duration: 4, // particle duration in sec

velocity: 80, // particle velocity in pixels/sec

effect: -1.3, // play with this for a nice effect

size: 8, // particle size in pixels

};

* 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 = ‘#f50b02’;

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>

Cách làm code trái tim đập của Thủ Khoa Lý

Code trái tim đập của thủ khoa Lý có thể chọn các ngôn ngữ như html, css, Python để viết đều được. Tùy vào khả năng lập trình của bạn đang ở level nào và có lợi thế về ngôn ngữ nào để lựa chọn. Nếu bạn không có năng khiếu lập trình thì có thể tìm các đoạn code đã được tạo sẵn để sử dụng. Bạn có thể vào các web như https://www.w3schools.com/ để check lại xem đoạn code mình copy về còn thiếu sót nào hay không, đã chạy được chưa.

Code trái tim lấp lánh y như bản gốc

Trái tim lấp lánh mà chúng tôi chia sẻ dưới đây được cho là giống đến 99% so với bản gốc. Bạn có thể tạo được cho mình một giao diện chuẩn phim ngôn tinh để gửi đến các cô nàng yêu thích bộ phim Chiếc bật lửa và váy công chúa. Cụ thể đoạn code được chúng tôi chia sẻ bên dưới:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>

<HTML>

<HEAD>

<style>

html,

body {

overflow: hidden;

padding: 0;

margin: 0;

background: #000;

}

canvas {

position: absolute;

width: 100%;

height: 100%;

}

canvas {

/* top: 50%;

left: 50%; */

z-index: 1;

display: block;

position: absolute;

transform: translate(-50%, -50%);

animation: heart 1.5s ease infinite

}

@keyframes heart {

0% {

transform: scale(1);

}

30% {

transform: scale(.8);

}

/* 60% {

transform: scale(1.2);

} */

100% {

transform: scale(1);

}

</style>

</HEAD>

<BODY>

</canvas>

* Settings

var settings = {

particles: {

length: 1500, // maximum amount of particles

duration: 2, // particle duration in sec

velocity: 135, // particle velocity in pixels/sec

effect: -0.35, // play with this for a nice effect

size: 14, // 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 / 3 + point.x * settings.particles.size / 550;

point.y = settings.particles.size / 3 – point.y * settings.particles.size / 550;

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>

Code trái tim có nhịp đập

Code trái tim có nhịp đập sẻ được thể hiện với một trái tim màu đỏ, di chuyển như những nhịp đập của trái tim. Tuy chúng không cầu kỳ như những đoạn mã code mà chúng tôi đã giới thiệu trước đó nhưng cũng đủ để “đốn tim” các nàng nhân dịp 20/10 sắp tới.

<!DOCTYPE html>

<html>

<head>

<style>

body {

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

}

.heart {

height: 100px;

width: 100px;

background-color: red;

transform: rotate(-45deg);

position: relative;

animation: heartbeat 1s infinite;

}

.heart::before,

.heart::after {

content: “”;

height: 100px;

width: 100px;

background-color: red;

border-radius: 50%;

position: absolute;

}

.heart::before {

top: -50px;

left: 0px;

}

.heart::after {

left: 50px;

top: 0px;

}

@keyframes heartbeat {

0% {

transform: scale(1)

rotate(-45deg);

}

25% {

transform: scale(1.25)

rotate(-45deg);

}

45% {

transform: scale(1.5)

rotate(-45deg);

}

</style>

</head>

<body>

</body>

</html>

Code trái tim huyền bí siêu đẹp

Một hình trái tim huyền bí từ nhiều chấm đỏ và trái tim có nhịp đập thể hiện một tình yêu tràn đầy nhiệt huyết. Cảm giác của trái tim này là được tạo dựng lên từ hàng nghìn trái tim nhỏ màu đỏ khác. Bạn có thể chọn đoạn code mà chúng tôi chia sẻ bên dưới:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>

<HTML>

<HEAD>

<style>

html, body {

height: 100%;

padding: 0;

margin: 0;

background: rgba(0, 0, 0, 0.851);

}

canvas {

position: absolute;

width: 100%;

height: 100%;

}

</style>

</HEAD>

<BODY>

</div>

var settings = {

particles: {

length: 10000, // maximum amount of particles

duration: 4, // particle duration in sec

velocity: 80, // particle velocity in pixels/sec

effect: -1.3, // play with this for a nice effect

size: 8, // particle size in pixels

};

* 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 = ‘#f50b02’;

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>

Những điều cần biết về code trái tim thủ khoa Lý?

Chiếc bật lửa và váy công chúa hay còn gọi là phim Chiếu sáng anh, sưởi ấm em ở tập 5 đã mang đến dấu ấn đặc biệt cho những người yêu phim ngôn tình Trung Quốc. Cách gọi tên cũng như cách thực hiện đều xuất phát từ bộ phim này.

Vì sao gọi là code trái tim thủ khoa Lý?

Code trái tim của thủ khoa Lý như thế nào?

Code trái tim của thủ khoa Lý được những lập trình viên yêu thích phim ngôn tình Trung đã biến tấu với rất nhiều kiểu dáng và giao diện khác nhau. Tất cả đã được chúng tôi chia sẻ chi tiết ở trên để các bạn lập trình tay ngang có thể dễ dàng chọn và thực hiện trái tim theo cách của riêng mình.

Kết luận

Tất cả các đoạn mã code mà chúng tôi chia sẻ ở trên đã được chúng tôi dùng trang web https://www.w3schools.com/ để kiểm tra lại độ chính xác của mã code. Tất cả đều chạy ổn, cho hình ảnh đẹp và có thể copy về sử dụng ngay. Hy vọng những chia sẻ của chúng tôi đã giúp bạn dễ dàng thực hiện một trái tim đỏ tuyệt đẹp với nhiều hiệu ứng đa dạng để gửi tặng người yêu, crush của mình!