Ridimensiona dinamicamente la finestra del canvas con javascript/jquery?

Question

Come posso ridimensionare una tela con javascript/jquery?

Il ridimensionamento utilizzando la funzione css e applicandolo all'elemento canvas è sufficiente per estendere il contenuto come se si stesse allungando un'immagine.

Come faccio a fare questo senza lo stretching?

http://jsfiddle.net/re8KU/4/

Answer 1

Fai un funzione che fa il disegno, poi ri-disegnare ogni volta che qualcosa cambia che lo richiede (come una pagina di ridimensionamento, ecc). Try it out

Make sure you set the context.canvas.width/height, non larghezza/altezza CSS. Si noti inoltre che l'impostazione della dimensione cancella la tela.

Come potrei scrivere:

(function(){ 
    var c = $("#canvas"), 
     ctx = c[0].getContext('2d'); 

    var draw = function(){ 
     ctx.fillStyle = "#000"; 
     ctx.fillRect(10,10,50,50); 
    }; 

    $(function(){ 
     // set width and height 
     ctx.canvas.height = 600; 
     ctx.canvas.width = 600; 
     // draw 
     draw(); 

     // wait 2 seconds, repeate same process 
     setTimeout(function(){ 
      ctx.canvas.height = 400; 
      ctx.canvas.width = 400; 
      draw(); 
     }, 2000) 
    }); 
})(); 

Answer 2

(function($) { 
     $.fn.extend({ 
      //Let the user resize the canvas to the size he/she wants 
      resizeCanvas: function(w, h) { 
       var c = $(this)[0] 
       c.width = w; 
       c.height = h 
      } 
     }) 
    })(jQuery) 

Usare questa funzione poco che ho creato per prendersi cura di ridimensionamento in movimento. Utilizzare questo modo -

$("the canvas element id/class").resizeCanvas(desired width, desired height) 

Answer 3

Ogni volta che il browser viene ridimensionata, la seguente soluzione ridimensiona le dimensioni della tela in base alle dimensioni della finestra con la creazione di un rapporto iniziale.

Jsfiddle: http://jsfiddle.net/h6c3rxxf/9/

Nota: La tela ha bisogno di essere ri-disegnato, quando viene ridimensionata.

HTML:

<canvas id="myCanvas" width="300" height="300" > 

CSS:

canvas { 
    border: 1px dotted black; 
    background: blue; 
} 

JavaScript:

(function() { 
    // get the precentage of height and width of the cavas based on the height and width of the window 
    getPercentageOfWindow = function() { 
     var viewportSize = getViewportSize(); 
     var canvasSize = getCanvastSize(); 
     return { 
      x: canvasSize.width/(viewportSize.width - 10), 
      y: canvasSize.height/(viewportSize.height - 10) 
     }; 
    }; 
    //get the context of the canvas 
    getCanvasContext = function() { 
     return $("#myCanvas")[0].getContext('2d'); 
    }; 
    // get viewport size 
    getViewportSize = function() { 
     return { 
      height: window.innerHeight, 
      width: window.innerWidth 
     }; 
    }; 
    // get canvas size 
    getCanvastSize = function() { 
     var ctx = getCanvasContext(); 
     return { 
      height: ctx.canvas.height, 
      width: ctx.canvas.width 
     }; 
    }; 
    // update canvas size 
    updateSizes = function() { 
     var viewportSize = getViewportSize(); 
     var ctx = getCanvasContext(); 
     ctx.canvas.height = viewportSize.height * percentage.y; 
     ctx.canvas.width = viewportSize.width * percentage.x; 
    }; 
    var percentage = getPercentageOfWindow(); 
    $(window).on('resize', function() { 
     updateSizes(); 
    }); 
}());