728x90

index.js

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style.css">
  <title>Document</title>
</head>
<body>
  <canvas></canvas>
</body>
<script type="module" src="./index.js"></script>
</html>

 

CanvasOption.js

export default class canvasOption {
  constructor() {
    this.canvas = document.querySelector('canvas')
    this.ctx = this.canvas.getContext('2d')
    this.dpr = window.devicePixelRatio
    this.fps = 60
    this.interval = 1000 / this.fps
    this.canvasWidth = innerWidth
    this.canvasHeight = innerHeight
  }
}

 

728x90

 

index.js

import canvasOption from "./CanvasOption.js"

class Canvas extends canvasOption {
  constructor() {
    super()
  }

  init() {
    this.canvasWidth = innerWidth
    this.canvasHeight = innerHeight
    this.canvas.width = this.canvasWidth * this.dpr
    this.canvas.height = this.canvasHeight * this.dpr
    this.ctx.scale(this.dpr, this.dpr)

    this.canvas.style.width = this.canvasWidth + 'px'
    this.canvas.style.height = this.canvasHeight + 'px'
  }

  render() {
    let now, delta
    let then = Date.now()

    const frame = () => {
      requestAnimationFrame(frame)
      now = Date.now()
      delta = now - then
      if (delta < this.interval) return

      // code write here

      then = now - (delta % this.interval)
    }
    requestAnimationFrame(frame)
  }
}

const canvas = new Canvas()

window.addEventListener('load', () => {
  canvas.init()
  canvas.render()
})

window.addEventListener('resize', () => {
  canvas.init()
})

 

style.css

html, body { 
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
728x90

'Canvas' 카테고리의 다른 글

[Canvas] 불꽃놀이 만들기  (1) 2024.06.10
[Canvas] 캔버스 resize  (0) 2024.05.22
[Canvas] dat.GUI 사용하기  (0) 2024.05.22
[Canvas] svg 필터 입히기(feGaussianBlur, feColorMatrix) | Gooey Effect  (0) 2024.05.21
[Canvas] 파티클 그리기 | 애니메이션 추가(requestAnimationFrame)  (1) 2024.05.20

티스토리툴바