Mở đầu

Là một lập trình viên Web chắc chắn ai cũng biết đến HTML, JavaScript, nhưng không phải ai cũng biết đến một thẻ HTML khá thú vị, nó làm cho Website trở nên sinh động hơn, đó chính là canvas. Vậy nên hôm nay chúng ta sẽ cũng làm một hình background độc đáo cho trang Web của bạn, hình có tương tác với sự kiện onclick nhé

Công nghệ mình sử dụng cho project là Canvas, JavaScript

Nội Dung

Cho những bạn chưa biết thì <canvas> là một thẻ HTML được sử dụng để vẽ đồ họa trên trang web một cách nhanh chóng. Thẻ <canvas> chỉ là vùng chứa cho đồ họa, chúng ta phải sử dụng JavaScript để thao tác với đối tượng do thẻ canvas tạo ra. Đối tượng canvas có một số method để giúp chúng ta vẽ đoạn thẳng, hình hộp, hình tròn, văn bản và thêm hình ảnh. Chi tiết sử dụng thế nào mình sẽ nói ở phần tiếp theo nhé.

HTML

Ở file HTML mình chỉ đơn giản sử dụng một thẻ canvas với id là canvas

<canvas id="canvas"></canvas>

Khởi tạo

Đầu tiên chúng ta khởi tạo đối tượng canvas 2d, và một số hằng số

const canvas = document.querySelector('#canvas')
const context = canvas.getContext('2d') // khởi tạo đối tượng canvas 2d
const H = 800
const W = 800
canvas.width = W
canvas.height = H

// canvas cung cấp method createLinearGradient để tạo hằng số biểu thị Gradient Color để ta có thể sử dụng trong canvas
const gradient = context.createLinearGradient(0, 0, W, H) // tham số là tọa độ 2 điểm chỉ định chiều của gradient
gradient.addColorStop(0, '#92fe9d') // bạn có thể thêm bao nhiêu màu tùy ý
gradient.addColorStop(1, '#00c9ff')

let circles = [] // khởi tạo biến global chứ các điểm di chuyển trên hình

const CIRCLE = {  // hằng số các giá trị cho điểm
  color: 'rgb(256,256,256,0.7)',  // màu sắc của điểm
  colorLine: 'rgb(256,256,256,0.5)', // màu sắc đoạn nối các điểm
  count: 30,   // số lượng điểm xuất hiện cùng lúc trên hình
  vX: 3,   // velocityX vận tốc tối đa theo trục X
  vY: 3,   // velocityY vận tốc tối đa theo trục Y
  range: 150,   // khi dưới khoảng cách này 2 điểm sẽ có đoạn nối
}

Đối tượng Dot

Tiếp theo chúng ta viết class Dot

class Dot {
 constructor(x, y, vx, vy, r) { //tham số nhận vào
   this.x = x
   this.y = y
   this.vx = vx
   this.vy = vy
   this.r = r   //bán kính của điểm
   this.dotsNears = []  // property xác định danh sách các điểm ở gần, mỗi object gồm tọa độ x y và khoảng cách d giữa 2 điểm
 }

 draw() {  // vẽ điểm và đoạn nối trên canvas
   context.beginPath()   // bắt đầu một đường vẽ, các thuộc tính như màu sắc sẽ trở về mặc định 
   context.arc(this.x, this.y, this.r, 0, Math.PI * 2, false)   //vẽ đường tròn
   context.fillStyle = DOT.color   // style màu cho hình tròn bên trong
   context.fill()  // giờ mới chính tức vẽ
   this.dotsNears.forEach((dotNear) => {   // vẽ các đoạn thẳng nối điểm hiện tại với các điểm gần đấy 
     context.beginPath() 
     context.moveTo(this.x, this.y)   // di chuyển đến tọa độ điểm hiện tại
     context.lineTo(dotNear.x, dotNear.y)   // vẽ đường thằng đến điểm gần đó
     context.lineWidth = (DOT.range - dotNear.d) * (2 / DOT.range)  // độ dày của đoạn thẳng, càng gần nhau thì càng dày, tối đa 2px
     context.strokeStyle = DOT.colorLine    // style màu cho đoạn thằng
     context.stroke()  // gọi thì mới vẽ
   })
 }

 update(dots) {  // update tọa độ điểm theo vận tốc của điểm đó, nhận vào biến global dots để tìm các điểm gần điểm hiện tại
   // khi điểm ta ngoài phạm vi của canvas thì ta sẽ đặt lại tọa độ và random lại vận tốc cho điểm đó
   if (this.x - this.r >= W) {
     this.x = 0 - this.r
     this.vy = (Math.random() - 0.5) * DOT.vY    // ramdom 1 chiều vận tốc thôi, ramdom cả 2 thì sẽ có trường hợp điểm không vào lại canvas mà sẽ bị random tiếp
   } 
   if (this.x + this.r < 0) {
     this.x = W + this.r
     this.vy = (Math.random() - 0.5) * DOT.vY
   }
   if (this.y - this.r >= H) {
     this.y = 0 - this.r
     this.vx = (Math.random() - 0.5) * DOT.vX
   }
   if (this.y + this.r < 0) {
     this.y = H + this.r
     this.vx = (Math.random() - 0.5) * DOT.vX
   }

   this.x += this.vx   // nếu trong hình thì update tọa độ
   this.y += this.vy

   this.dotsNears = []   
   dots.forEach((dot) => {    // tìm tọa độ điểm gần đó
     if (dot === this) return
     const d = Math.sqrt((this.x - dot.x) ** 2 + (this.y - dot.y) ** 2)
     if (d < DOT.range) {
       this.dotsNears.push({ x: dot.x, y: dot.y, d: d })
     }
   })
   this.draw()
 }
}

Khởi tạo animate

Ở đây chúng ta sử dụng method requestAnimationFrame của đối tượng window. Hiểu nôm na nó sẽ như 1 vòng lặp, thay vì while(true) vẽ xong xóa thì chúng ra sẽ sử dụng , method của window. Cách sử dụng nó gần giống như kiểu hàm đệ quy, cụ thể như sau

function init() { // khởi tạo các điểm
  for (let i = 0; i < DOT.count; i++) {
    const r = Math.random() * 3 + 3   //  random bán kính của điểm từ 3 đến 6px 
    const positionX = Math.random() * W
    const positionY = Math.random() * H
    const vx = (Math.random() - 0.5) * DOT.vX    // -0.5 để có cả vận tốc âm, dương, theo trục Y âm sẽ di chuyển từ dưới lên trên
    const vy = (Math.random() - 0.5) * DOT.vY
    dots.push(new Dot(positionX, positionY, vx, vy, r))
  }
}

function animate() {
  requestAnimationFrame(animate) 
  context.fillStyle = gradient   // style màu nền của canvas là màu gradient ta định nghĩ ban đầu
  context.fillRect(0, 0, canvas.width, canvas.height)

  // ....
  
  dots.forEach((dot) => {  // update lại tọa độ các điểm 
    dot.update(dots)
  })
}
 // sau đó chúng ta gọi hàm là đã ok rồi đó
init()
animate()

Ở đâu mình muốn nói rõ thêm method requestAnimationFrame thông thường có tốc độ là 60 lần mỗi giây (sẽ khớp với tốc độ làm mới hiển thị trong hầu hết các trình duyệt web). Tức là vận tốc di chuyển của các điểm sẽ là vận tốc theo trục của điểm đó (vx, vy) nhân với 60/giây. Như ở đầu ta để vận tốc tối đa của điểm là DOT.vY là 3px tức là nó sẽ có vận tốc tối đa 180px/s

Thêm sự kiện Click

Giờ chúng ta sẽ thêm sự kiện click vào canvas để mỗi khi click vào sẽ có 3 điểm xuất hiện từ đó và nở ra, trông khá thích mắt

canvas.addEventListener('click', function (event) {
  for (let i = 0; i < 3; i++) {
    const r = Math.random() * 3 + 3
    const positionX = event.offsetX   // tọa độ điểm xuất hiện là tọa độ click chuột
    const positionY = event.offsetY
    const vx = (Math.random() - 0.5) * DOT.vX
    const vy = (Math.random() - 0.5) * DOT.vY
    dots.push(new Dot(positionX, positionY, vx, vy, r))
  }
})

Nhưng nếu click nhiều quá thì sẽ có rất nhiều điểm mới được thêm vào, mà cái gì nhiều quá cũng không tốt. Vậy nên ta filter dots nếu nó nhiều hơn DOT.count điểm thì điểm nào ra khỏi canvas ta sẽ cho nó đi luôn, khỏi random lại nhé

function animate() {
  requestAnimationFrame(animate)
  context.fillStyle = gradient
  context.fillRect(0, 0, canvas.width, canvas.height)

  //filter trước khi update
  if (dots.length > DOT.count) {
    dots = dots.filter(
      (dot) => dot.x + dot.r > 0 && dot.x - dot.r < W && dot.y + dot.r > 0 && dot.y - dot.r < H
    )
  }
  dots.forEach((dot) => {
    dot.update(dots)
  })
}

Vậy là ta đã hoàn thành rồi đó Đây là link demo

Kết luận

Mình hi vọng với chút chia sẻ như trên sẽ giúp được cho nhiều bạn, đặc biệt là các bạn mới biết thêm những như hay ho mà ta có thể làm được với HTML, JS, từ đó khơi đậy sự sáng tạo, làm cho việc lập trình trở nên thú vị hơn ! Cảm ơn các bạn đã đọc (hay hay không hay thì cũng cho xin 1 vote up nhé mọi người )