109 lines
2.4 KiB
JavaScript
109 lines
2.4 KiB
JavaScript
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);
|
|
//}
|