Canvas là một phần tử của HTML5, cho phép thực hiện lập trình kết xuất đồ họa các đối tượng hai chiều trên trang web. Canvas chiếm một khu vực trong trang web với chiều rộng và chiều cao định trước. Sau đó sử dụng Javascript có thể truy cập vào khu vực này để vẽ thông qua một tập các hàm đồ họa tương tự như các API 2D khác.

Hướng dẫn tạo hiệu ứng tuyết rơi

1. Tạo thẻ html canvas

<canvas id="canvas" />

2. Thêm 1 chút Css 

body {
  margin: 0;
  padding: 0;
}

embed {
  display: none;
}

canvas {
  background-color:black;
  background-repeat: no-repeat;
  background-size: cover;
}

3. Tiến hành hiển thị hiệu ứng tuyết rơi

const canvas = document.querySelector('#canvas');

const c = canvas.getContext('2d');

canvas.height = window.innerHeight;
canvas.width = window.innerWidth;

window.addEventListener('resize', function() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
})

function snow() {
  this.radius = Math.random() * 2;
  this.x = Math.floor(Math.random() * canvas.width);
  this.y = -this.radius;
  this.color = '#FFF';
  this.speed = {
    x: Math.random() * 4 - 2,
    y: Math.random() * 3 + 2,
  };
}

snow.prototype.draw = function() {
  c.beginPath();
  c.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
  c.shadowColor = this.color;
  c.shadowBlur = 5;
  c.fillStyle = this.color;
  c.fill();
  c.closePath();
}

snow.prototype.update = function() {
  this.x += this.speed.x;
  this.y += this.speed.y;
  if (this.y >= canvas.height) {
    this.speed.y = 0;
  }
  this.draw();
}

const arr = [];

function init() {
  arr.push(new snow());
}

function animate() {
  c.clearRect(0,0, canvas.width, canvas.height);
  arr.forEach(function(item) {
    item.update();
  })
  if (arr.length > 1000) {
    arr.splice(0,1);
  }
  init();
  window.requestAnimationFrame(animate);
}

animate();

Mong bài viết giúp ích được các bạn phần nào trong thiết kế Web. Hãy nhấn nút  để mọi người cùng học hỏi kiến thức mới nhé. Cảm ơn các bạn đã quan tâm VNCODE.