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

Thứ sáu - 26/11/2021 22:36
Mỗi mùa noel tới thì chúng ta sẽ bắt gặp các hiệu ứng tuyết rơi ở các website nhằm hưởng ứng một màu noel đặc biệt chỉ xuất hiện 1 lần trong năm. Hôm nay vncode xin chia sẽ đến các bạn bộ sourcode html5 canvas hiệu ứng tuyết rơi đẹp mắt
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.

Tác giả: admin

Tổng số điểm của bài viết là: 0 trong 0 đánh giá

Click để đánh giá bài viết

  Ý kiến bạn đọc

Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây