부트 스트랩의 반응 캔버스

Question

나는 반응이 좋은 캔버스를하려고합니다. 내 모든 테스트는 600x600 캔버스로 수행되었으며 그 높이와 너비로 제대로 작동하고 모든 선을 정확하게 그립니다. 문제는 내가 이것을 시도한 것입니다 :

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

그냥 myCanvas가 sm-col-8 안에 있습니다.

내 랩톱에서 멋지게 보이고 내 전화기에서 멋지게 보이지만 (내 무승부() 기능 때문에 사각형을 생각하고 있기 때문에) 왼쪽 아래 모서리 (근처)에서 더 많이 시작합니다. 오른쪽 상단에서 시작해야합니다.

그래서 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(); 

} 

Answer 1

당신은 context.scale 명령을 사용하여 HTML 캔버스가 반응 할 수 있습니다.

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

} 

Answer 2

는 사용

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