SOURCE

console 命令行工具 X clear

                    
>
console
var canvasW,minW,minH;
var onload = () => {
    let cav = document.getElementById('canv');
    let d = cav.getContext('2d');


    d.canvas.width = Math.min(window.innerHeight, window.innerWidth) - 130;
    let maxW = d.canvas.width;
    d.canvas.height = maxW;
    let maxH = d.canvas.height;

    canvasW = maxW;

    d.strokeWidth = 1;
    //d.fillStyle = 'white';
    //d.fillRect(0,0,maxW,maxH);

    var drawUnit = (a,b,c) => {
        if (c == undefined) c = 10;
        d.moveTo(a,b);
        if (c > 0) d.lineTo(a,b+c);
        else d.lineTo(a-c,b);
        d.stroke();
    };

    let s = 20;
    for(let i=0,x=1,y=1,c=0; i<=maxW; i+=s,c++) {
        d.moveTo(x,y);
        d.lineTo(i,y);
        if (c > 0 && c % 5 == 0) drawUnit(i,y,s);
        else drawUnit(i,y,s/2);
        x=i;
    }
    for(let i=0,x=1,y=1,c=0; i<=maxH; i+=s,c++) {
        d.moveTo(x,y);
        d.lineTo(x,i);
        if (c > 0 && c % 5 == 0) drawUnit(x,i,0-s);
        else drawUnit(x,i,0-s/2);
        y=i;
    }
}

$(() => {
    onload();
    var obj1 = $('.obj1');
    var obj2 = $('.obj2');

    minW = obj1.width();
    minH = obj1.height();

    $('form').submit(() => {
        let in1 = $('#in1').val().trim().toLowerCase();
        let in2 = $('#in2').val().trim().toLowerCase();
        
        try{
            let scale = 1;
            let c = new RegExp('x|,|\s+');
            let getAr = (v) => {
                let ar;
                if (/^\d+(x|,|\s+)\d+$/.test(v)==false) throw new Error('Input is Error');
                if (c.test(v)) ar = v.split(c);
                else if (/^\d+$/.test(v)) ar = [v,v];
                else throw new Error('Input Error!');
                
                let w = parseInt(ar[0]);
                let h = parseInt(ar[1]);
                if (w < minW) throw new Error(minW + ' is min width');
                if (h < minH) throw new Error(minH + ' is min height');
                if (w > canvasW || h > canvasW) {
                    let scale2 = canvasW / w;
                    if (scale==1 || (scale != scale2 && scale > scale2)) scale = scale2;
                    console.log('scale '+scale);
                }
                return [w,h];
            };

            let ar1 = getAr(in1);
            let ar2 = getAr(in2);

            let setAr = (ar) => {
                if (scale != 1) {
                    let w = ar[0] * scale;
                    let h = ar[1] * scale;
                    w = w.toFixed(2);
                    h = h.toFixed(2);
                    //w = w.toFloat();
                    //h = h.toFloat();
                    console.log('w '+w+', h '+h);
                    return [w,h];
                }
                return ar;
            };

            ar1 = setAr(ar1);
            ar2 = setAr(ar2);

            obj1.css('width', ar1[0]+'px').css('height', ar1[1]+'px');
            obj2.css('width', ar2[0]+'px').css('height', ar2[1]+'px');

            //console.log(ar);
        }catch(e){
            alert(e);
            //throw e;
        }finally{
            return false;
        }
    });
});

window.onerror = (e) => {
    alert(e);
}
<div id="app">
    <div class="bg">
        <div class="obj1">参照物</div>
        <div class="obj2">机身</div>
        <canvas id="canv"></canvas>
    </div>
    <div class="panel">
        <form v-on:submit="submit">
            <h3>参照物与机身尺寸比较</h3>
            <label>参照物尺寸(mm):</label>
            <input type="text" id="in1" value="325x227" required />
            <hr/>
            <label>机身尺寸(mm):</label>
            <input type="text" id="in2" value="156x75" required />
            <hr/>
            <input type="submit" />
        </form>
    </div>
</div>
body,.bg,canvas{
    position: absolute;
}
.panel,.obj1,.obj2{
    position: fixed;
}
body,.bg,canvas{
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}
canvas{
    border: 1px dotted gray;
}
.bg{
    background-color: floralwhite;
}
.obj1{
    background: rgba(77, 100, 109, 0.6);
}
.obj2{
    background: rgba(127, 202, 41, 0.6);
}
.obj1,.obj2{
    padding: 20px;
    box-sizing: border-box;
    text-align: right;
    color: white;
    border: 1px solid gray;
    border-radius: 10px;
}
.panel{
    top: 40px;
    right: 20px;
    border: 1px dotted gray;
    padding: 5px;
    background: rgba(777, 777, 777, 0.5);
    border-radius: 5px;
}

本项目引用的自定义外部资源