Hoatieu.vn Tài liệu Có thể bạn chưa biết?

5 Cách làm code trái tim đập thủ khoa Lý có tên MỚI NHẤT

Cách làm code trái tim đập
Tải về

Cách làm code trái tim đập thủ khoa Lý. Trong bộ phim Thắp sáng anh, sưởi ấm em đang được nhiều bạn trẻ yêu thích hiên nay, nhân vật Lý Tuân đã tỏ tình với người mình yêu. Cụ thể là Lý Tuân đã tạo ra đoạn code để tạo ra hình vẽ có trái tim màu hồng và đập để cho nữ chính Chu Vận giải mã.

Và đoạn phim này đang hot trên Tiktok vì độ đáng yêu của cặp đôi và hơn nữa cũng được dân IT chú ý làm theo để có thể sử dụng tỏ tình crush của mình. Nếu bạn không biết về IT hoặc không rành thì hãy làm theo các bước đơn giản dưới đây sẽ biết cách làm code trái tim đập thủ khoa Lý nhé.

Code trái tim đập C++ thủ khoa lý

1. Làm code trái tim đập thủ khoa Lý có tên ở giữa

Để làm Code trái tim C++ Bạn làm theo những bước dưới đây nhé.

Bước 1:

Đầu tiên bạn tải đoạn code dưới đây về máy tính, sau đó mở đoạn code bằng Notepad. Trong đoạn code dưới đây sẽ có phần chữ hiển thị trong trái tim để bạn có thể chỉnh sửa.

Bạn đọc tải đoạn code tại đây Hoặc ở sao chép ở mục 3. của Bài viết (Có 4 mã code Trái tim đập thủ khoa Lý thả thính Chu Vận)

Bước 2:

Sau khi tải về bạn mở đoạn code để chỉnh sửa nội dung trong code. Bạn kéo xuống bên dưới sẽ có tùy chọn thay đổi lại nội dung chữ hiển thị trong hình trái tim phần chữ "Anh yêu em". Chúng ta điền nội dung nào mà mình muốn vào trong dòng code này đều được nhé. Bạn cũng có thể đổi cỡ chữ tại dòng font-size theo ý mình nhé.

Cách làm code trái tim đập thủ khoa Lý
Cách làm code trái tim đập thủ khoa Lý

Bước 3:

Sau đó nhấn File chọn Save As để lưu lại thành 1 file mới html như hình dưới đây.

Cách làm code trái tim đập thủ khoa Lý
Cách làm code trái tim đập thủ khoa Lý

Vậy là xong. Bạn chỉ cần mở file code mới lưu này để xem thành quả code trái tim đập như thế nào. Để tặng trái tim đập này cho người thương của mình thì gửi file 1.html là được.

Cách làm code trái tim đập thủ khoa Lý
Cách làm code trái tim đập thủ khoa Lý

2. Cách Đổi màu Code Trái Tim đập thủ khoa Lý thế nào?

Code trái tim đập của thủ khoa lý. Bạn cũng có thể chủ động đổi màu trái tim và phông nền của đoạn code trên theo hướng dẫn sau:

- Đổi màu nền: Chọn mã màu/tra trên bảng màu html để tìm mã màu mong muốn sau đó tìm đến đoạn code background: #CCE46B;”, thay sang mã màu bạn vừa tìm.

- Đổi màu trái tim: Bạn cũng tìm mã màu mình thích như với màu nền, rồi tìm trong đoạn code dòng “context.fillStyle = ‘#000000’;”, Đổi lại là xong.

3. 5 mã code trái tim thủ khoa Lý

3.1. Code trái tim đập thủ khoa Lý thả thính 1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> Heart </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 
   
  <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 class="box">
      <canvas id="pinkboard"></canvas>
   </div>
  <script>
  /*
 * 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
 */
(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 = '#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>

3.2. Mã Code Trái tim đập thủ khoa Lý số 2

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

<HTML>

 <HEAD>

  <TITLE> New Document </TITLE>

  <META NAME="Generator" CONTENT="EditPlus">

  <META NAME="Author" CONTENT="">

  <META NAME="Keywords" CONTENT="">

  <META NAME="Description" CONTENT="">

  <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>

3.3. Code trái tim đập không chữ thủ khoa Lý

Cách làm code trái tim đập dưới đây sẽ tạo ra mẫu trái tim giống như trong bộ phim Thắp sáng anh, sưởi ấm em của nam chính Lý Tuân.

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

<HTML>

 <HEAD>

  <TITLE> New Document </TITLE>

  <META NAME="Generator" CONTENT="EditPlus">

  <META NAME="Author" CONTENT="">

  <META NAME="Keywords" CONTENT="">

  <META NAME="Description" CONTENT="">

  <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>

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

Code trái tim đập này là phiên bản nâng cấp khi chạy sẽ có thêm những tia sáng bao xung quanh đẹp mắt hơn rất nhiều. Các bạn cùng thử mã code trái tim đập thủ khoa Lý phát tia sáng gửi người ấy thêm phần đặc biệt và độc đáo nhé.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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>
    <canvas id="heart"></canvas>

    <script>
        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>

3.5 Tải code trái tim đập chèn hình ảnh

Bước 1: Bạn tải mục code trái tim đập chèn hình ảnh xuống máy tính, sau đó giải nén tập tin.

Bạn tải code tại đây:

https://drive.google.com/file/d/1sOWvnQvfElynPpPWoqrDXTyoKW4m1RB9/view?usp=share_link

Bước 2: Tiếp đến để chèn ảnh vào hình trái tim thì bạn sẽ chuyển file hình ảnh vào cùng thư mục chứa code trái tim.

Bước 3: Chúng ta sẽ copy tên ảnh và xem định dạng của ảnh là gì để chèn vào trong code.

Bước 4: Nhấn chuột vào file index.html rồi chọn Notepad để mở hoặc công cụ đọc file HTML mà bạn đang có trên máy tính.

Bước 5: Bạn tiến hành chỉnh sửa code theo ý mình. Tại EDIT HERE sẽ chỉnh sửa nội dung hiển thị trong trái tim. STARDUST1 có thể chỉnh sửa năm nếu muốn.

Tại STARDUST2 bạn điền tên của bạn và người đó nhé. STARDUST3 có thể thay đổi Love You thành dòng khác tùy bạn.

Dòng img sẽ điền tên và định dạng của ảnh cần chèn vào giữ như hình là được.

Mời bạn đọc tham khảo thêm nội dung hữu ích trong mục Tài liệu liên quan.

Đánh giá bài viết
15 44.973
  • Chia sẻ:
    🖼️ Vũ Thị Uyên
  • Ngày:

Tham khảo thêm

1 Bình luận
Sắp xếp theo
⚛
Xóa Đăng nhập để Gửi
  • Vịt Cute
    Vịt Cute

    Mình đi tỏ tình đây các bạn ơi

    Thích Phản hồi 09/11/22

    Gợi ý cho bạn

    Có thể bạn cần

    Xem thêm
    Chỉ thành viên Hoatieu Pro tải được nội dung này! Hoatieu Pro - Tải nhanh, website không quảng cáo! Tìm hiểu thêm
    Mua Hoatieu Pro 69.000đ
    Bạn đã mua gói? Đăng nhập ngay!
    Có thể bạn chưa biết?

    Bài viết hay Có thể bạn chưa biết?

    Xem thêm