0

私はcanvas要素を持っています：

<canvas id="canvas" width="100" height="100"></canvas>

そして、キャンバスをフルスクリーンにするためのJavaScript：

var canvas, ctx, w, h;
    function start() {
        canvas = $("#canvas")[0];
        ctx = canvas.getContext("2d");
        w = $('body').innerWidth();
        $("#canvas").width(w);
        $("#canvas").height(w);
        w = $("#canvas").width();
        h = $("#canvas").height();
        if(typeof game_loop != "undefined") clearInterval(game_loop);
        game_loop = setInterval(paint, 60);
    }

    function paint() {
        ctx.fillStyle = "white";
        ctx.fillRect(0, 0, w, h);
        ctx.strokeStyle = "blue";
        ctx.strokeRect(0, 0, 50, 50);   
    }

なぜ私が1つの大きな正方形を取得しないのかわかりません50x50。手伝ってくれますか？

4

2 に答える 2

0

これは、幅/高さを使用してサイズ変更時に正方形を描画する簡単な例です。

例： http： //jsfiddle.net/Ubv7X/

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');


var paint = function() {
    canvas.width  = window.innerWidth;
    canvas.height = window.innerHeight;

    // Draw background
    ctx.fillStyle = 'rgb(255, 255, 255)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // Draw rect
    var rect_size=50;
    ctx.fillStyle = 'rgb(0, 0, 255)';
    ctx.fillRect(canvas.width/2-(rect_size/2), canvas.height/2-(rect_size/2), 
                 rect_size, rect_size);
}

setInterval(paint, 60);
于 2013-02-15T15:19:30.440 に答える
0

実際にキャンバスのサイズを変更するには ( have more pixles のように)、 width/height 属性を設定する必要があります。jQueryswidth()/height()は css 値を設定します。前と同じピクセル数で構成されるキャンバス要素が引き伸ばされます。代わりに次を使用します。

$('#canvas').prop({
  width: 400, // the 400 is just arbitrary
  height: 400
});

または、Alnitaks のコメントによると、もちろん、値を直接割り当てることもできます。

canvas.width = 400;
canvas.height = 400;
于 2013-02-15T11:18:42.823 に答える