如何全屏显示我的画布并使其充满屏幕？

Question

我有一个 HTML5 画布，当它进入全屏时，它不会填满整个屏幕。

如果我只更改 canvas.style.width/height 那么它可以工作，但显示看起来很糟糕，而且鼠标坐标也放错了位置。

js

var canvas = document.getElementById("canvas");

var mouseX = 0;
var mouseY = 0;

canvas.style.left = 0;
canvas.style.top = 0;

onmousemove = function(event) {
    mouseX = (event.pageX - parseFloat(canvas.style.left, 10)) + document.body.scrollLeft;
    mouseY = (event.pageY - parseFloat(canvas.style.top, 10)) + document.body.scrollTop;
}

document.body.addEventListener("keydown", function (event) {
    switch (event.keyCode) {
        case 70:
            if (canvas.requestFullScreen) {
                canvas.requestFullScreen();
            }
            else if (canvas.webkitRequestFullScreen) {
                canvas.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
            } 
            else if (canvas.mozRequestFullScreen) {
                canvas.mozRequestFullScreen();
            }
        break;
    }
});

function on_fullscreen_change() {
    if(document.mozFullScreen || document.webkitIsFullScreen) {
        canvas.style.position = "absolute";
        canvas.style.left = 0;
        canvas.style.top = 0;
        canvas.style.width = screen.width+"px";
        canvas.style.height = screen.height+"px";
        canvas.width = parseFloat(canvas.style.width, 10);
        canvas.height = parseFloat(canvas.style.height, 10);
    }
    else {
        canvas.style.left = 0;
        canvas.style.top = 0;
        canvas.style.width = "1280px";
        canvas.style.height = "720px";
        canvas.width = parseFloat(canvas.style.width, 10);
        canvas.height = parseFloat(canvas.style.height, 10);
    }
}

document.addEventListener('mozfullscreenchange', on_fullscreen_change);
document.addEventListener('webkitfullscreenchange', on_fullscreen_change);

window.setInterval(function(){

    var context = canvas.getContext('2d');
    context.fillStyle = '#0e6eae';
    context.fillRect(mouseX, mouseY, 150, 100);

}, 10);

function getMouseX(){
    return mouseX;
}

function getMouseY(){
    return mouseY;
}

css

:-webkit-full-screen { width: 100%; height: 100%; background: #000; }

编辑：您可以在http://liveweave.com/g5WLW5下载测试文件

Answer 1

尝试添加：

canvas.width = screen.width;
canvas.height = screen.height;

canvas.width 和 canvas.style.width 是两个不同的东西。第一个调整画布上下文的大小，第二个缩放它的表示。