0

我有一个画布元素：

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

我不知道为什么我没有得到一个大正方形50x50。你能帮我吗？

4

2 回答 2

0

要实际调整画布大小（如拥有更多像素），您需要设置宽度/高度属性。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 回答
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 回答