cvoges12/inventory-manager-front-end
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Coils

Browse source
This commit is contained in:
Clayton Voges 2022-01-16 00:57:06 +00:00
parent 322fd6e541
commit cdf41544ab
4 changed files with 119 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
index.html
View file

@ -1,12 +1,13 @@
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>Inventory Manager</title>
<meta charset="utf-8">
<link href="styles/style.css" rel="stylesheet">
</head>
<body>
<canvas id="inventory">
<canvas>
</canvas>
<script src="inventory.js"></script>
<script src="src/canvas.js"></script>
</body>
</html>

108
src/canvas.js Normal file
View file

@ -0,0 +1,108 @@
var canvas = document.querySelector('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var c = canvas.getContext('2d');
// Rect
//c.fillStyle = 'rgba(255,0,255,0.5)';
//c.fillRect(100,200,100,100,0.5);
//c.fillStyle = 'rgba(0,0,255,0.5)';
//c.fillRect(300,400,100,100);
//c.fillStyle = 'rgba(0,255,0,0.5)';
//c.fillRect(400,100,100,100);
// Line
//c.beginPath();
//c.moveTo(50,300);
//c.lineTo(300,100);
//c.lineTo(400,200);
//c.strokeStyle = "fe3477";
//c.stroke();
// Arc
//c.beginPath();
//c.arc(300, 300, 30, 0.0, Math.PI, true);
//c.strokeStyle = 'blue';
//c.stroke();
// Circles
//for(var i = 100; i < (window.innerWidth - 100); i=i+40) {
// var y = Math.random() * window.innerHeight;
// c.beginPath();
// c.arc(i, y, 5, 0.0, Math.PI * 2, true);
// c.strokeStyle = 'red';
// c.stroke();
//}
// Coil
function coil(x,y, width,od){
var radius = od / 2;
// bottom line
c.beginPath();
c.moveTo(x+width, y+od);
c.lineTo(x,y+od);
// left curve
c.ellipse(x,y+radius, radius/4, radius, 0, 0.5 * Math.PI, 1.5 * Math.PI);
// top line
c.lineTo(x+width,y);
c.strokeStyle = 'black';
c.stroke();
// right outer circle
c.beginPath();
c.ellipse(x+width,y+radius, radius/4, radius, 0, 0.5 * Math.PI, 3.5 * Math.PI);
c.strokeStyle = 'black';
c.stroke();
// right inner circle
c.beginPath();
c.ellipse(x+width,y+radius, radius/8, radius/2, 0, 0.5 * Math.PI, 3.5 * Math.PI);
c.strokeStyle = 'black';
c.stroke();
}
for (var i=40; i < (12*40); i=i+40) {
for (var j=50; j < (12*50); j=j+50) {
coil(j,i, 20 + (5 * Math.random()),30 + (5 * Math.random()));
}
}
const coils = {
xs: [50,50,50,5],
ys: [50,150,250,35],
widths: [68,75,68,75],
ods: [80,80,100,100]
};
//window.addEventListener('load', () => {
// const canvas = document.querySelector('#canvas');
// const ctx = canvas.getContext("2d");
//
// reloadEvent(canvas, ctx);
//});
//
//function reloadEvent(x, y){
// window.addEventListener('resize', () => {
// resize(x, y);
// });
//}
//
//function draw(x) {
// x.strokeStyle = 'blue';
// x.lineWidth = '5';
// x.strokeRect(0, 0, window.innerWidth, window.innerHeight);
//}
//
//function resize(x, y){
// x.height = window.innerHeight;
// x.width = window.innerWidth;
// draw(y);
//}

24
src/inventory.js
View file

@ -1,24 +0,0 @@
window.addEventListener('load', () => {
const canvas = document.querySelector('#inventory');
const ctx = canvas.getContext("2d");
reloadEvent(canvas, ctx);
});
function reloadEvent(x, y){
window.addEventListener('resize', () => {
resize(x, y);
});
}
function draw(x) {
x.strokeStyle = 'blue';
x.lineWidth = '5';
x.strokeRect(0, 0, window.innerWidth, window.innerHeight);
}
function resize(x, y){
x.height = window.innerHeight;
x.width = window.innerWidth;
draw(y);
}

8
styles/style.css
View file

@ -1,8 +1,14 @@
/*
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#inventory {
*/
canvas {
border: 1px solid #000000;
}
body {
margin: 0;
}