响应式Bootstrap画布

Question

我正在尝试制作一个响应式画布。我所有的测试都是在600x600的画布上进行的，使用该高度和宽度时，它可以正常工作并正确绘制每条线。问题是我尝试了以下内容：

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

只是为了记录一下，我的画布(myCanvas)在sm-col-8中。在我的笔记本电脑上看起来很好，在手机上也很好，但是(由于我的draw()函数会考虑正方形)，绘图开始的位置更像是在左下角而不是右上角。因此，我不想改变我的draw()函数，但我想重新调整画布大小。我的意思是：如果我在笔记本电脑/平板电脑上尺寸为600x600，则显示为该尺寸；但如果我在拥有384x640的手机上，则显示为300x300？我不知道这是否是一个好的解决方案。

我的draw函数：

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();

}

- Sergiodiaz53

Answer 1

使用Bootstrap，可以这样写：

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

- Elton da Costa

Answer 2

您可以使用 context.scale 命令使您的html Canvas具有响应性。

.scale命令将缩放canvas使用的内部坐标系。

这意味着您不需要更改任何自己的绘图坐标，因为canvas会自动将您的坐标转换为缩放后的canvas坐标。

// save the original width,height used in drawLines()
var origWidth=600;
var origHeight=600;
var scale=1.00;


// reference to canvas and context
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");


// call this after resizing
// send in the new maximum width,height desired
function resizeAndRedraw(newMaxWidth,newMaxHeight){

    // calc the global scaling factor that fits into the new size
    // and also maintains the original aspect ratio
    scale=Math.min((newMaxWidth/origWidth),(newMaxHeight/origHeight))

    // resize the canvas while maintaining correct aspect ratio
    canvas.width=origWidth*scale;
    canvas.height=origHeight*scale;

    // Note: changing the canvas element's width or height will
    // erase the canvas so you must reissue all your drawing commands        
    drawLines(lines,i,table,xtotal,ytotal);

}


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

    // scale the canvas coordinate system to the current scale
    // Note: This scales the coordinates used internally
    // by canvas. It does not resize the canvas element
    ctx.scale(s,s);

    // now do your drawing commands
    // You do not need to adjust your drawing coordinates because
    // the Canvas will do that for you
    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();

    // restore the context to it's unscaled state
    ctx.scale(-s,-s);

}

- markE