昔作ったjavascript

2020年9月30日 21:22

とりあえずどんな風に表示されるかを確認するために昔社員教育用に作ったダイヤフラム付きピストンの動作原理表示用プログラムのソースコードをそのままコピペしてみる。

<!DOCTYPE html>
<html lang="ja">
<title>充填ピストン動作バージョン2</title>
<body>
<p>充填ビストン動作バージョン2</p>
<FORM name="Form1"><input type="range" name="waza" min="10" max="200" value="100"><br>
<button type="button" neme="str" value="hajime"onclick="haji()"><font size=4>始め</font></button><br></FORM>
<button type="button" neme="awawa" value="awawa"onclick="awa()"><font size=4>未使用</font></button><br></FORM>

<button type="button" neme="st" value="owari" onclick="owa()"><font size=4>終り</font></button><br></FORM>
青…液体<br>
黄色…バキュームポンプにより負圧<br>
構造　ピストンの前後にダイヤフラムという膜状の部品を取り付けることによって、シリンダの<br>
液側と駆動側が完全に遮断されている。2枚の膜の間はバキュームポンプによって負圧に保たれており<br>
①ダイヤフラムの波うちやねじれを防ぎ、一動作ごとの押し出し量を一定にする。②圧力をモニタリング<br>
することで、ダイヤフラムの損傷を検知する。という効果がある。<br>

<canvas id="canvassample1" width="900" height="800"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvassample1');
//if ( ! canvas || ! canvas.getContext ) {
// return false;
//}
var keika = 0;
var awakazu = 0;
var awax = new Array();
var away = new Array();
var interv = 0;

var ctx = canvas.getContext('2d');
onload = function() {
wakugumi();
}
function haji(){
interv = Form1.waza.value;

timer1 = setInterval("iro()",interv);

}
function awa(){
awax[awakazu] = 100;
away[awakazu] = 300;
awakazu = awakazu +1;
if(awakazu == 100){
awakazu = 0;
}
}
function sikaku1(context, color){
context.fillStyle = color;
context.fillRect(150,330,10,10);
}
function iro(){
var xm;
var xmw
var i;
keika = keika+1;
xm = (keika%40);
if (xm <20){
xm2 = xm;
}
else{
xm2 = 19-(xm-20);
}
ctx.fillStyle = "rgb(255,255,255)";
ctx.fillRect(0,182,600,235);
ctx.fillStyle = "rgb(100,100,255)";
ctx.fillRect(602,50,195,550);
ctx.fillRect(100,202,602,195);
ctx.fillRect(490,182,200,235);
ctx.fillRect(xm2*5+300,187,400,10);
ctx.fillRect(xm2*5+300,405,400,10);
ctx.fillRect(xm2*10+300,197,300,7);
ctx.fillRect(xm2*10+300,397,300,8);
ctx.fillStyle = "rgb(100,100,100)";
ctx.fillRect(xm2*10+150,202,150,195);
ctx.fillRect(0,300,xm2*10+150,50);
ctx.fillStyle = "rgb(255,255,255)";
ctx.fillRect(0,202,xm2*10+150,195);
ctx.fillRect(600,600,200,200);
ctx.fillStyle = "rgb(100,100,255)";
ctx.fillRect(602,xm*10+400,195,200);
ctx.fillStyle = "rgb(100,100,100)";
// ctx.fillRect(xm2*10+150,202,150,195);
ctx.fillRect(0,270,xm2*10+150,50);
ctx.fillStyle = "rgb(255,255,100)";
ctx.fillRect(150,182,340,3);
ctx.fillRect(150,415,340,3);
ctx.fillRect(xm2*10+150,196,150,6);
ctx.fillRect(xm2*10+150,397,150,6);
ctx.fillRect(xm2*5+250,185,50,11);
ctx.fillRect(xm2*5+250,403,50,12);
ctx.fillRect(300,417,10,50);
ctx.fillRect(0,457,300,10);

ctx.fillStyle = "rgb(0,0,0)";
ctx.fillRect(600,150,40,10);
ctx.fillRect(760,150,40,10);
ctx.fillRect(600,550,40,10);
ctx.fillRect(760,550,40,10);
if(xm <20){
ctx.fillRect(620,160,160,10);
ctx.fillRect(620,570,160,10);

}
else{
ctx.fillRect(620,170,160,10);
ctx.fillRect(620,560,160,10);

}
ctx.beginPath();
ctx.lineWidth = 3;
ctx.moveTo(490,182);
ctx.lineTo(490,187);
ctx.lineTo(xm2*5+300,187);
ctx.lineTo(xm2*5+300,195);
ctx.lineTo(xm2*10+300,195);
ctx.lineTo(xm2*10+300,202);
ctx.moveTo(490,420);
ctx.lineTo(490,413);
ctx.lineTo(xm2*5+300,413);
ctx.lineTo(xm2*5+300,405);
ctx.lineTo(xm2*10+300,405);
ctx.lineTo(xm2*10+300,397);
ctx.moveTo(150,182);
ctx.lineTo(150,187);
ctx.lineTo(250+xm2*5,187);
ctx.lineTo(250+xm2*5,195);
ctx.lineTo(xm2*10+150,195);
ctx.lineTo(xm2*10+150,202);
ctx.moveTo(150,420);
ctx.lineTo(150,413);
ctx.lineTo(xm2*5+250,413);
ctx.lineTo(xm2*5+250,405);
ctx.lineTo(xm2*10+150,405);
ctx.lineTo(xm2*10+150,398);

ctx.stroke();
if(interv != Form1.waza.value){
owa();
haji();
}

}
function owa(){
clearInterval(timer1);
}

//最初の枠組みを作る関数
function wakugumi() {

ctx.beginPath();
ctx.lineWidth = 5;
ctx.moveTo(600,50);
ctx.lineTo(600,180);
ctx.lineTo(100,180);
ctx.moveTo(100,420);
ctx.lineTo(600,420);
ctx.lineTo(600,600);
// ctx.lineTo(500,400);
// ctx.lineTo(500,500);
ctx.lineWidth = 5;
ctx.moveTo(800,50);
ctx.lineTo(800,600);
// ctx.lineTo(700,400);
// ctx.lineTo(700,50);
ctx.moveTo(298,420)
ctx.lineTo(298,455)
ctx.lineTo(0,455)
ctx.moveTo(0,470)
ctx.lineTo(312,470)
ctx.lineTo(312,420)

// ctx.closePath();
ctx.stroke();

}

</script>

この記事が気に入ったらサポートをしてみませんか？