javascript/jqueryを使って動的にキャンバスウィンドウのサイズを変更しますか？

Question

javascript/jqueryでキャンバスのサイズを変更するにはどうすればよいですか？

CSS関数を使用してサイズを変更しキャンバス要素に適用すると、画像を引き伸ばしているかのようにコンテンツが伸びるだけです。

私はストレッチなしでこれを行うことについてどうすればいいですか？

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