-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
59 lines (45 loc) · 1.22 KB
/
main.js
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
// 2d canvas drawing context
let ctx
// Setup the canvas and drawing context, and begin drawing frames
function begin() {
resize()
const canvas = document.getElementById("canvas")
ctx = canvas.getContext("2d")
window.requestAnimationFrame(draw)
}
// Resize the canvas to the size of the viewport
function resize() {
const canvas = document.getElementById("canvas")
canvas.width = window.innerWidth
canvas.height = window.innerHeight
}
// Timestamp of last frame
let lastFrame = 0.0
let pos = {
x: 100.0,
y: 100.0,
}
// Draw a frame
function draw(sinceBegin) {
const delta = sinceBegin - lastFrame
lastFrame = sinceBegin
pos.x = 200.0 * Math.cos(sinceBegin / 500) + ctx.canvas.width / 2.0
pos.y = 200.0 * Math.sin(sinceBegin / 500) + ctx.canvas.height / 2.0
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)
ctx.fillStyle = "GREEN"
ctx.beginPath()
ctx.arc(pos.x, pos.y, 100.0, 0, Math.PI * 2.0)
ctx.fill()
ctx.fillStyle = "BLACK"
ctx.font = "24px sans-serif"
ctx.fillText("Canvas Demo", 20, 50)
window.requestAnimationFrame(draw)
}
function keydown(event) {
if (event.repeat) return
console.log(event.key)
}
// Setup event handlers
window.onload = begin
window.onresize = resize
window.onkeydown = keydown