Question

我有一个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);   
    }

我不知道为什么我得到一个不是50x50的大广场。你能帮忙吗？

Answer 1

要实际调整画布大小（如中有更多像素），您需要设置宽度/高度属性。 jQuerys width()/height()设置css值。导致拉伸画布元素由与之前相同数量的像素组成。而是使用：

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

或者，根据Alnitaks的评论，您当然可以直接分配值：

canvas.width = 400;
canvas.height = 400;

Answer 2

这是一个使用width / height在resize上绘制正方形的简单示例。

示例：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);

调整大小后在画布上绘图

2 个答案: