Coils
This commit is contained in:
parent
322fd6e541
commit
cdf41544ab
|
@ -1,12 +1,13 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<meta charset="utf-8">
|
|
||||||
<head>
|
<head>
|
||||||
|
<title>Inventory Manager</title>
|
||||||
|
<meta charset="utf-8">
|
||||||
<link href="styles/style.css" rel="stylesheet">
|
<link href="styles/style.css" rel="stylesheet">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<canvas id="inventory">
|
<canvas>
|
||||||
</canvas>
|
</canvas>
|
||||||
<script src="inventory.js"></script>
|
<script src="src/canvas.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -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);
|
||||||
|
//}
|
|
@ -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);
|
|
||||||
}
|
|
|
@ -1,8 +1,14 @@
|
||||||
|
/*
|
||||||
* {
|
* {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
#inventory {
|
*/
|
||||||
|
canvas {
|
||||||
border: 1px solid #000000;
|
border: 1px solid #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue