Bootstrap 中的响应式画布答案

【问题标题】：Responsive Canvas in BootstrapBootstrap 中的响应式画布
【发布时间】：2014-12-03 01:45:15
【问题描述】：

我正在尝试制作响应式画布。我所有的测试都是使用 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？我不知道这是否是一个好的解决方案。

我的绘图功能：

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

}

【问题讨论】：

标签： javascript css html canvas twitter-bootstrap-3

【解决方案1】：

使用 Bootstrap，使用：

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

【讨论】：

【解决方案2】：

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

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

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

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

}

【讨论】：