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

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

Xem Thêm : Chia sẻ giao diện shop bán đồ trẻ em nukeviet

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.

Nguồn: https://vncode.info
Danh mục: Thủ Thuật Chia Sẻ Hay

Related Posts

Code hiệu ứng icon twitter hoạt động khi hover

Có thể bạn quan tâm Code Pháo hoa Javacript Image Hotspot – A WordPress Plugin Xây dựng trình chỉnh sửa hình ảnh trong HTML CSS & JavaScript…

Hướng dẫn phân trang sản phẩm bằng shortcode page woocomere

Có thể bạn quan tâm Top 10 những framework date time html thường được sử dụng Thêm nút xem thêm và thu gọn dành cho chi tiết…

Hướng dẫn tạo Line Chart thật dễ dàng với Chartjs

ChartJS là gì? Chart.js là một thư viện mã nguồn mở hỗ trợ các loại biểu đồ: bar, line, area, pie (doughnut), radar, polar… ChartJS mặc định là…

Code Pháo hoa Javacript

Có thể bạn quan tâm Hướng dẫn bật OPcache trên dịch vụ hosting. Lấy lại mật khẩu đăng nhập quản trị trong wordpress Thêm nút xem thêm…

Hiệu ứng slider nhấp đôi miễn phí

Có thể bạn quan tâm Hướng dẫn copy chữ trong ảnh trên web bằng điện thoại nhanh, gọn, lẹ nhất Code Pháo hoa Javacript Share theme flatesome…

Top 10 những framework date time html thường được sử dụng

Có thể bạn quan tâm Hướng dẫn làm menu đa cấp mobile nukeviet Hướng dẫn bật OPcache trên dịch vụ hosting. Hướng dẫn chỉnh sửa giá woocommerce…