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
'Frontend > 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 |