Last active
July 18, 2021 11:32
-
-
Save lewdev/60e34d7ddb67d936946c7c540f03642d to your computer and use it in GitHub Desktop.
Canvas Template with common functions
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"/> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"/> | |
| <title>{title}</title> | |
| <meta name="author" content="Lewis Nakao"> | |
| <meta name="description" content="{description}"> | |
| <meta name="keywords" content="JavaScript, Emoji, HTML Canvas, Open Source"> | |
| <style> | |
| * { margin: 0; padding: 0; box-sizing: border-box; } | |
| #a { position: relative; display: block; } | |
| </style> | |
| </head> | |
| <body id=b style="width:100%"> | |
| <canvas id=a></canvas> | |
| <!-- links --> | |
| <div style="position:absolute;right:0;top:0;font-size:24px;"> | |
| <a href="https://github.com/lewdev/rock-paper-scissors-battle" title="Source Code available on Github!">👨💻</a> | |
| <a href="https://lewdev.github.io" title="Find more stuff by me"> | |
| <img src="https://lewdev.github.io/site/favicon/favicon-32x32.png"/> | |
| </a> | |
| </div> | |
| <!-- <script type="text/javascript" src=script.min.js></script> --> | |
| <script type="text/javascript" src=utils.js></script> | |
| <script type="text/javascript" src=script.js></script> | |
| <script async src="https://www.googletagmanager.com/gtag/js?id=UA-2833478-13"></script> | |
| <script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);} | |
| gtag('js', new Date());gtag('config', 'UA-2833478-13');</script> | |
| </body> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //configs | |
| const FPS = 20; //50fps | |
| const init = () => { | |
| //setup listeners | |
| //d.onclick = d.ontouchend = handleClick; | |
| //d.onkeyup = handleKeys; | |
| }; | |
| const update = () => { | |
| clear(); | |
| calc(); | |
| draw(); | |
| }; | |
| const draw = () => { | |
| c.font = (innerWidth / 10) + 'px serif'; | |
| writeText("hello world", innerWidth / 2, innerHeight / 2, true); | |
| }; | |
| const calc = () => { | |
| // // debug.closest = JSON.stringify(closest); | |
| // pangle = angle(p, closest) + ((r() * 0.4) - 0.2); | |
| // xVelocity = SPEED * M.cos(pangle); | |
| // yVelocity = SPEED * M.sin(pangle); | |
| // p.x += xVelocity; | |
| // p.y += yVelocity; | |
| }; | |
| onload = () => init(); | |
| setInterval(update, FPS); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //common short-handed functions | |
| const c = a.getContext("2d"), // no more $type conditional | |
| w = window, | |
| d = document, | |
| M = Math, | |
| r = M.random | |
| ; | |
| const rect = (x, y, w, h, color) => { | |
| c.fillStyle = color || "#000"; | |
| c.rect(x, y, w, h); | |
| c.fill(); | |
| }; | |
| const clear = bgColor => rect(0, 0, w.innerWidth, w.innerHeight, bgColor || "#888"); | |
| //distance between 2 points | |
| const dist = (p1, p2) => { | |
| const a = p1.x - p2.x; | |
| const b = p1.y - p2.y; | |
| return M.sqrt(a * a + b * b); | |
| }; | |
| //angle between two points | |
| const angle = (p1, p2) => M.atan2(p2.y - p1.y, p2.x - p1.x); | |
| const writeText = (text, x, y, centered, color) => { | |
| //c.font = (innerWidth / 6) + 'px serif'; | |
| const rx = centered ? c.measureText(text).width / 2 : x; | |
| c.fillStyle = color || "black"; | |
| c.fillText(text, rx, y); | |
| }; | |
| const drawLine = (p1, p2, thickness, color) => { | |
| c.beginPath(); | |
| c.strokeStyle = color || "red"; | |
| c.lineWidth = thickness || 3; | |
| c.moveTo(p1.x, p1.y); | |
| c.lineTo(p2.x, p2.y); | |
| c.stroke(); | |
| }; | |
| //apply resize canvas logic | |
| const resize = () => {a.width = innerWidth; a.height = innerHeight;}; | |
| let resizeTimeout = null; | |
| w.addEventListener('resize', () => { | |
| clearTimeout(resizeTimeout); | |
| resizeTimeout = setTimeout(resize, 100); | |
| }); | |
| resize(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment