用javascript/jquery動態調整畫布窗口的大小？

Question

如何使用javascript/jquery調整畫布大小？

使用css函數調整大小並將其應用於canvas元素只是拉伸內容，就好像伸展圖像一樣。

我該如何去做這個沒有拉伸？

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

Answer 1

做，做圖紙，然後重新抽籤，每當有新的變化，需要它（如頁面調整大小等）的功能。 Try it out

Make sure you set the context.canvas.width/height，而不是CSS寬度/高度。另請注意，設置大小會清除畫布。

如何我會寫它：

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

使用這個小功能，我創建採取調整在旅途中照顧。使用這種方式 -

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

Answer 3

只要瀏覽器的大小時，下面的解決方案通過創建一個初始比率調整大小基於所述窗口的尺寸的畫布的尺寸。

的jsfiddle：http://jsfiddle.net/h6c3rxxf/9/

注：畫布需要重新繪製，當它被調整。

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