greg/beamsweep-animation
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Greg Shuflin 2023-02-28 01:28:53 -08:00
commit 4987ca4594
2 changed files with 55 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
index.html Normal file
View File

@ -0,0 +1,11 @@
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Beamsweep</h1>
<canvas id="maincanvas" width=640 height=480></canvas>
<script src="main.js"></script>
</body>
</html>

44
main.js Normal file
View File

@ -0,0 +1,44 @@
console.log("Begining animation");
const canvas = document.getElementById("maincanvas");
const ctx = canvas.getContext("2d");
const width = canvas.width;
const height = canvas.height;
const barWidth = 10;
const barHeight = 40;
const barColor = "#33DDFF";
const clearToBackground = (ctx) => {
ctx.clearRect(0, 0, width, height);
ctx.fillStyle = "blue";
ctx.fillRect(0,0, width, height);
};
// cornerX, Y represent upper-left corner of bounding box
const drawBar = (ctx, cornerX, cornerY) => {
const halfway = barWidth / 2;
ctx.fillStyle = barColor;
//TODO stroke arc for corners
ctx.beginPath();
ctx.moveTo(cornerX, cornerY + halfway);
ctx.lineTo(cornerX, cornerY + halfway + barHeight);
ctx.lineTo(cornerX + barWidth, cornerY + halfway + barHeight);
ctx.lineTo(cornerX + barWidth, cornerY + halfway);
ctx.closePath();
ctx.fill();
}
clearToBackground(ctx);
drawBar(ctx, 20, 20);
drawBar(ctx, 40, 20);