javascript - Bootstrap 中的响应式 Canvas

Question

我正在尝试制作响应式 Canvas 。我所有的测试都是在 600x600 的 Canvas 上进行的，并且在该高度和宽度下它可以正常工作并正确绘制每一行。问题是我试过这个:

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

郑重声明，myCanvas 位于 sm-col-8 中。

它在我的笔记本电脑上看起来不错，在我的手机上看起来也不错，但是(因为我的 draw() 函数，因为它正在考虑一个正方形)绘图更像是在左下角(附近)开始并且它应该从右上角开始。

所以，我不想更改我的 draw() 函数，但我正在寻找的是重新调整 Canvas 大小。我的意思是:如果我在笔记本电脑/平板电脑中……使用 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>