Bootstrap中的響應式畫布

我正在嘗試做一個響應式畫布。我所有的測試都使用600x600的畫布進行，並且高度和寬度都可以正常工作並正確繪製每一行。問題是我試過這個：Bootstrap中的響應式畫布

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

}

來源

2014-10-08 Sergiodiaz53

你可以讓你的HTML畫布響應使用context.scale命令。

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

}

來源

2014-10-08 17:34:22 markE

自舉，使用方法：

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

來源

2015-02-04 13:26:45

Bootstrap中的響應式畫布

回答

相關問題