canvas 方块连续移动

例子: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>

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注