-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
31 lines (26 loc) · 997 Bytes
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
</head>
<body>
<canvas id="small-canvas" width="1920" height="1080" ></canvas>
<canvas id="canvas" height="1920" width="1080"></canvas>
<script type="text/javascript">
const canvas = document.getElementById('canvas')
const context = canvas.getContext('2d')
canvas.width = 1920
canvas.height = 1080
function loop(delta) {
requestAnimationFrame(loop)
const { width, height } = canvas;
// context.clearRect(0,0,width,height)
context.drawImage(canvas, -8, -8, canvas.width + 16, canvas.height + 16)
context.beginPath()
context.arc(canvas.width/2 + Math.sin(delta / 100) * 10, canvas.height/2, 10 + Math.abs(Math.sin(delta / 100)*20), 0, Math.PI * 2)
context.strokeStyle = 'hsl(' + delta / 2 + ', 50%, 50%)'
context.stroke()
}
requestAnimationFrame(loop)
</script>
</body>
</html>