如何全屏顯示畫布並使其充滿屏幕？

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是兩件事。 第一個調整畫布的上下文大小，第二個調整畫布的表示形式。