javascript - Responsive Canvas in Bootstrap - Stack Overflow

admin管理员组

文章数量:1277884

I'm trying to do a responsive canvas. All my tests has been doing with a 600x600 canvas and with that height and width it works OK and paint every line correctly. The problem is that I have tried this:

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

Just for the record, myCanvas is inside a sm-col-8.

And it looks nice on my laptop and looks nice on my phone but (because of my draw() function, because it was thinking for a square) the draw starts more like in the down-left corner (nearby) and it should start at up-right corner.

So, I don't want to change my draw() function but what I'm looking for is to reescale the canvas size. I mean: If I'm in a laptop/tablet.. with 600x600, show it at that size, but if I'm on my phone which has 384x640 show it like 300x300? I don't know if it could be a good solution.

My draw function:

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

}

I'm trying to do a responsive canvas. All my tests has been doing with a 600x600 canvas and with that height and width it works OK and paint every line correctly. The problem is that I have tried this:

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

Just for the record, myCanvas is inside a sm-col-8.

And it looks nice on my laptop and looks nice on my phone but (because of my draw() function, because it was thinking for a square) the draw starts more like in the down-left corner (nearby) and it should start at up-right corner.

So, I don't want to change my draw() function but what I'm looking for is to reescale the canvas size. I mean: If I'm in a laptop/tablet.. with 600x600, show it at that size, but if I'm on my phone which has 384x640 show it like 300x300? I don't know if it could be a good solution.

My draw function:

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

Share Improve this question Follow edited Oct 8, 2014 at 11:50 Ben Fortune 32.1k1010 gold badges8181 silver badges8181 bronze badges asked Oct 8, 2014 at 11:49 Sergiodiaz53Sergiodiaz53 1,28833 gold badges1515 silver badges2323 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

With Bootstrap, use:

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

You can make your html Canvas responsive by using the context.scale mand.

The .scale mand will scale the internal coordinates system used by canvas.

This means you do not need to change any of your own drawing coordinates because canvas will automatically transform your coordinates into scaled canvas coordinates for you.

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

}

本文标签： javascriptResponsive Canvas in BootstrapStack Overflow