例子:labelTest
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<style type="text/css">
body {
margin: 20px auto;
padding: 0;
width: 1000px
}
canvas {
border: dashed 2px #ccc
}
span {
font-size: 16px;
cursor: pointer
}
input {
text-align: right;
}
</style>
<body>
<canvas id="canvas" class="mb-5" width="1000px" height="300px"></canvas>
<div class="container">
<div class="row text-center mb-3">
<div class="col-sm">
<button type="button" class="btn btn-primary btn-lm" onclick="rectMove()">ワーク移動</button>
</div>
<div class="col-sm">
<button type="button" class="btn btn-primary btn-lm" onclick="rectMoveAuto()">ワーク連続移動</button>
</div>
<div class="col-sm"></div>
<div class="col-sm">
<button type="button" class="btn btn-dark btn-lm" onclick="rectClear()">ワーククリア</button>
</div>
</div>
<div class="row">
<!-- <div class="col-sm"></div> -->
<div class="col-sm mb-3 productHidden">
<label class="form-label">次に出現するワーク</label>
<div class="form-check">
<input class="form-check-input" type="radio" name="product" id="productOk"
onchange="productChange()">
<label class="form-check-label" for="productOk">
良品
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="product" id="productNg"
onchange="productChange()" checked>
<label class="form-check-label" for="productNg">
不良品
</label>
</div>
</div>
<div class="col-sm mb-3 productHidden" hidden>
<label for="okgap" class="form-label">良品率 %</label>
<input type="number" class="form-control" id="okgap" value="50"
oninput="if(value<0||value=='')value=0;if(value>100)value=100;value=value.replace(/[^\d]/g,'');">
</div>
<div class="col-sm mb-3">
<label for="time" class="form-label">連続移動の時間間隔</label>
<input type="number" class="form-control" id="time" value="50"
oninput="if(value<0||value=='')value=0;if(value>50000)value=50000;value=value.replace(/[^\d]/g,'');">
</div>
<!-- <div class="col-sm"></div> -->
</div>
<div class="row">
<!-- <div class="col-sm"></div> -->
<div class="col-sm mb-3">
<label for="space" class="form-label">ワーク間隔</label>
<input type="number" class="form-control" id="space" value="50"
oninput="if(value<0||value=='')value=0;if(value>500)value=500;value=value.replace(/[^\d]/g,'');">
</div>
<div class="col-sm mb-3">
<label for="move" class="form-label">移動距離</label>
<input type="number" class="form-control" id="move" value="30"
oninput="if(value<0||value=='')value=0;if(value>500)value=500;value=value.replace(/[^\d]/g,'');">
</div>
<!-- <div class="col-sm"></div> -->
</div>
<div class="row">
<!-- <div class="col-sm"></div> -->
<div class="col-sm mb-3">
<label for="rectW" class="form-label">ワーク幅</label>
<input type="number" class="form-control" id="rectW" value="100"
oninput="if(value<0||value=='')value=0;if(value>500)value=500;value=value.replace(/[^\d]/g,'');">
</div>
<div class="col-sm mb-3">
<label for="rectH" class="form-label">ワーク高さ</label>
<input type="number" class="form-control" id="rectH" value="50"
oninput="if(value<0||value=='')value=0;if(value>500)value=500;value=value.replace(/[^\d]/g,'');">
</div>
<!-- <div class="col-sm"></div> -->
</div>
</div>
<script type="text/javascript">
// create a canvas
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = 'red';
ctx.fillRect(800, 80, 10, 100)
ctx.strokeStyle = 'black'; //枠色
ctx.lineWidth = 1;
ctx.font = "18px size";
//スケール
ctx.beginPath();
ctx.moveTo(0, 50);
ctx.lineTo(850, 50);
ctx.stroke();
//スケール刻む
ctx.fillText("50", 50, 40);
ctx.fillText("100", 100, 40);
ctx.fillText("150", 150, 40);
ctx.fillText("200", 200, 40);
ctx.fillText("250", 250, 40);
ctx.fillText("300", 300, 40);
ctx.fillText("350", 350, 40);
ctx.fillText("400", 400, 40);
ctx.fillText("450", 450, 40);
ctx.fillText("500", 500, 40);
ctx.fillText("550", 550, 40);
ctx.fillText("600", 600, 40);
ctx.fillText("650", 650, 40);
ctx.fillText("700", 700, 40);
ctx.fillText("750", 750, 40);
ctx.fillText("800", 800, 40);
//良品or不良品 check change
var isProduct = false; //良品or不良品
function productChange() {
isProduct = !isProduct;
}
//移動
const xArr = [];
const pArr = [];
xArr[0] = -100;
pArr[0] = isProduct;
function rectMove() {
let sp = parseInt(document.getElementById("space").value);
let mv = parseInt(document.getElementById("move").value);
let w = parseInt(document.getElementById("rectW").value);
let h = parseInt(document.getElementById("rectH").value);
let okgap = parseInt(document.getElementById("okgap").value);
//ワーククリア
ctx.clearRect(0, 80, canvas.width, 100);
ctx.beginPath();
ctx.fillStyle = 'red'; //塗色
ctx.fillRect(800, 80, 10, 100);
//新規ワーク
let xpLen = xArr.length;
if (xArr[xpLen - 1] > 0 && xArr.length < 8) {
xArr[xpLen] = xArr[xArr.length - 1] - w - sp;
if (isAuto) {
pArr[xpLen] = Math.floor(Math.random() * 100) < okgap ? true : false;
} else {
pArr[xpLen] = isProduct;
}
}
//ワーク表示
for (let i = 0; i < xArr.length; i++) {
xArr[i] += mv;
if (pArr[i]) {
ctx.fillStyle = 'white';
ctx.fillRect(xArr[i], 100, w, h);
ctx.fillStyle = 'grey';
ctx.fillRect(xArr[i] + 20, 100, w - 40, h);
ctx.strokeRect(xArr[i], 100, w, h);
} else {
ctx.fillStyle = 'grey';
ctx.fillRect(xArr[i], 100, w, h);
ctx.strokeRect(xArr[i], 100, w, h);
}
}
//良品 1000に超えると消される
for (let j = 0; j < xArr.length; j++) {
if (pArr[j]) {
if (xArr[j] > 1000) {
xArr.splice(j, 1);
pArr.splice(j, 1);
}
}
}
//不良品 700に超えると消される
for (let k = 0; k < xArr.length; k++) {
if (!pArr[k]) {
if (xArr[k] > 700) {
xArr.splice(k, 1);
pArr.splice(k, 1);
}
}
}
// console.log(xArr[0],xArr[1], xArr[2], xArr[3], xArr[4], xArr[5], xArr[6], xArr[7], xArr[8], xArr[9], xArr[10])
}
//連続移動
var autoIng;
var isAuto = false;
function rectMoveAuto() {
let t = parseInt(document.getElementById("time").value);
isAuto = !isAuto;
if (isAuto) {
//連続移動開始
autoIng = setInterval(function () { rectMove() }, t);
document.getElementsByClassName("productHidden")[0].hidden = true;
document.getElementsByClassName("productHidden")[1].hidden = false;
} else {
//連続移動停止
clearInterval(autoIng);
document.getElementsByClassName("productHidden")[0].hidden = false;
document.getElementsByClassName("productHidden")[1].hidden = true;
}
}
//ワーククリア
function rectClear() {
ctx.clearRect(0, 80, canvas.width, 100);
ctx.beginPath();
ctx.fillStyle = 'red'; //塗色
ctx.fillRect(800, 80, 10, 100);
xArr.splice(0, xArr.length);
pArr.splice(0, pArr.length);
xArr[0] = -100;
pArr[0] = isProduct;
}
</script>
</body>
</html>