Bootstrap中的响应画布

Question

我正在尝试做一个响应式画布.我所有的测试都是用600x600帆布做的,并且它的高度和宽度都能正常工作并正确地绘制每一行.问题是我试过这个:

 #myCanvas {
    background-color: #ffffff;
    border:1px solid #000000;
    min-height: 600px;
    height: 100%;
    width: 100%;
 }

只是为了记录,myCanvas在sm-col-8中.

它在我的笔记本电脑上看起来不错,在我的手机上看起来不错但是(因为我的绘画()功能,因为它正在考虑一个正方形)画面开始更像是在左下角(附近),它应该从右上角.

所以,我不想改变我的draw()函数,但我正在寻找的是重新缩放画布大小.我的意思是:如果我在笔记本电脑/平板电脑上... 600x600,显示它的大小,但如果我在我的手机上有384x640显示它像300x300？我不知道这是否是一个很好的解决方案.

我的绘画功能:

function drawLines(lines,i,table,xtotal,ytotal){

    var c = document.getElementById("myCanvas");

    var ctx = c.getContext("2d");

    var xIni;
    var xFin;
    var yIni;
    var yFin;

    xIni = (c.width*parseInt(lines[i][1])/xtotal);
    yIni = (c.height*parseInt(lines[i][2])/ytotal);
    xFin = (c.width*parseInt(lines[i][3])/xtotal);
    yFin = (c.height*parseInt(lines[i][4])/ytotal);

    ctx.beginPath();
    ctx.moveTo(xIni,c.height-yIni);
    ctx.lineTo(xFin,c.height-yFin);
    ctx.lineWidth=4;

    ctx.strokeStyle = colorAleatorio();

    ctx.stroke();

}

Answer 1

使用Bootstrap,使用:

<canvas id="canvas" class='img-responsive' style="border: 1px solid black;"></canvas>