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