40 lines
1.3 KiB
HTML
40 lines
1.3 KiB
HTML
|
<!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="/css/style.css">
|
||
|
|
<title>LOLED - Canvas</title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<canvas></canvas>
|
||
|
|
<p>To send canvas of the page to LOLED click the following link :
|
||
|
|
<a id="link" href="">LOLED that canvas !</a>
|
||
|
|
</p>
|
||
|
|
<p>You can also drag this link in your bookmarks to call it on any page with a canvas. Like <a href="https://hydra.ojack.xyz/">Hydra</a> or <a href="https://topos.raphaelforment.fr/">Topos</a>.</p>
|
||
|
|
<script>
|
||
|
|
document.getElementById("link").href = `javascript:(function(){let s = document.createElement('script');s.src = '${new URL("/js/grab-canvas.js", document.documentElement.baseURI).toString()}';document.body.appendChild(s);})()`
|
||
|
|
</script>
|
||
|
|
<script>
|
||
|
|
const canvas = document.querySelector("canvas");
|
||
|
|
canvas.width = 500
|
||
|
|
canvas.height = 500
|
||
|
|
|
||
|
|
const ctx = canvas.getContext("2d");
|
||
|
|
|
||
|
|
let incr = 0;
|
||
|
|
|
||
|
|
function draw(){
|
||
|
|
ctx.fillStyle = `hsl(${incr}deg 100% 50%)`;
|
||
|
|
ctx.fillRect(-50, -50, 100, 100)
|
||
|
|
incr += 1;
|
||
|
|
|
||
|
|
requestAnimationFrame(draw)
|
||
|
|
}
|
||
|
|
|
||
|
|
ctx.translate(canvas.width/2, canvas.height/2),
|
||
|
|
draw()
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|