HTML Canvas 全屏

Question

我正在使用 HTML Canvas 使用以下應用程序： http : //driz.co.uk/particles/

目前它設置為 640x480 像素，但我想讓它全屏顯示，因為它將顯示為投影儀。 但是，據我所知，我不能將畫布大小設置為 100% 作為變量，只有數字而不是 %。 使用 CSS 只是拉伸它而不是讓它真正全屏。

有什么想法嗎？

編輯：嘗試使用 jQuery 找到高度和寬度，但它打破了畫布任何想法為什么？

var $j = jQuery.noConflict();


var canvas;
var ctx;
var canvasDiv;
var outerDiv;

var canvasW = $j('body').width();
var canvasH = $j('body').height();

//var canvasW     = 640;
//var canvasH     = 480;

var numMovers   = 550;
var movers      = [];
var friction    = .96;
var radCirc     = Math.PI * 2;

var mouseX, mouseY, mouseVX, mouseVY, prevMouseX = 0, prevMouseY = 0;   
var isMouseDown = true;



function init()
{
    canvas = document.getElementById("mainCanvas");

    if( canvas.getContext )
    {
        setup();
        setInterval( run , 33 );
    }
}

function setup()
{
    outerDiv = document.getElementById("outer");
    canvasDiv = document.getElementById("canvasContainer");
    ctx = canvas.getContext("2d");

    var i = numMovers;
    while( i-- )
    {
        var m = new Mover();
        m.x  = canvasW * .5;
        m.y  = canvasH * .5;
        m.vX = Math.cos(i) * Math.random() * 25;
        m.vY = Math.sin(i) * Math.random() * 25;
        m.size = 2;
        movers[i] = m;
    }

    document.onmousedown = onDocMouseDown;
    document.onmouseup   = onDocMouseUp;
    document.onmousemove = onDocMouseMove;
}

function run()
{
    ctx.globalCompositeOperation = "source-over";
    ctx.fillStyle = "rgba(8,8,12,.65)";
    ctx.fillRect( 0 , 0 , canvasW , canvasH );
    ctx.globalCompositeOperation = "lighter";

    mouseVX    = mouseX - prevMouseX;
    mouseVY    = mouseY - prevMouseY;
    prevMouseX = mouseX;
    prevMouseY = mouseY;

    var toDist   = canvasW / 1.15;
    var stirDist = canvasW / 8;
    var blowDist = canvasW / 2;

    var Mrnd   = Math.random;
    var Mabs   = Math.abs;
    var Msqrt  = Math.sqrt;
    var Mcos   = Math.cos;
    var Msin   = Math.sin;
    var Matan2 = Math.atan2;
    var Mmax   = Math.max;
    var Mmin   = Math.min;

    var i = numMovers;
    while( i-- )
    {
        var m  = movers[i];
        var x  = m.x;
        var y  = m.y;
        var vX = m.vX;
        var vY = m.vY;

        var dX = x - mouseX;
        var dY = y - mouseY; 
        var d = Msqrt( dX * dX + dY * dY );
        var a = Matan2( dY , dX );
        var cosA = Mcos( a );
        var sinA = Msin( a );

        if( isMouseDown )
        {
            if( d < blowDist )
            {
                var blowAcc = ( 1 - ( d / blowDist ) ) * 2;
                vX += cosA * blowAcc + .5 - Mrnd();
                vY += sinA * blowAcc + .5 - Mrnd();
            }
        }

        if( d < toDist )
        {
            var toAcc = ( 1 - ( d / toDist ) ) * canvasW * .0014;
            vX -= cosA * toAcc;
            vY -= sinA * toAcc;
        }

        if( d < stirDist )
        {
            var mAcc = ( 1 - ( d / stirDist ) ) * canvasW * .00022;
            vX += mouseVX * mAcc;
            vY += mouseVY * mAcc;           
        }


        vX *= friction;
        vY *= friction;

        var avgVX = Mabs( vX );
        var avgVY = Mabs( vY );
        var avgV = ( avgVX + avgVY ) * .5;

        if( avgVX < .1 ) vX *= Mrnd() * 3;
        if( avgVY < .1 ) vY *= Mrnd() * 3;

        var sc = avgV * .45;
        sc = Mmax( Mmin( sc , 3.5 ) , .4 );


        var nextX = x + vX;
        var nextY = y + vY;

        if( nextX > canvasW )
        {
            nextX = canvasW;
            vX *= -1;
        }
        else if( nextX < 0 )
        {
            nextX = 0;
            vX *= -1;
        }

        if( nextY > canvasH )
        {
            nextY = canvasH;
            vY *= -1;
        }
        else if( nextY < 0 )
        {
            nextY = 0;
            vY *= -1;
        }


        m.vX = vX;
        m.vY = vY;
        m.x  = nextX;
        m.y  = nextY;

        ctx.fillStyle = m.color;
        ctx.beginPath();
        ctx.arc( nextX , nextY , sc , 0 , radCirc , true );
        ctx.closePath();
        ctx.fill();     
    }

    //rect( ctx , mouseX - 3 , mouseY - 3 , 6 , 6 );
}


function onDocMouseMove( e )
{
    var ev = e ? e : window.event;
    mouseX = ev.clientX - outerDiv.offsetLeft - canvasDiv.offsetLeft;
    mouseY = ev.clientY - outerDiv.offsetTop  - canvasDiv.offsetTop;
}

function onDocMouseDown( e )
{
    isMouseDown = true;
    return false;
}

function onDocMouseUp( e )
{
    isMouseDown = true;
    return false;
}



// ==========================================================================================


function Mover()
{
    this.color = "rgb(" + Math.floor( Math.random()*255 ) + "," + Math.floor( Math.random()*255 ) + "," + Math.floor( Math.random()*255 ) + ")";
    this.y     = 0;
    this.x     = 0;
    this.vX    = 0;
    this.vY    = 0;
    this.size  = 0; 
}


// ==========================================================================================


function rect( context , x , y , w , h ) 
{
    context.beginPath();
    context.rect( x , y , w , h );
    context.closePath();
    context.fill();
}


// ==========================================================================================

Answer 1

javascript有

var canvasW     = 640;
var canvasH     = 480;

在其中。 嘗試更改這些以及畫布的 css。

或者更好的是，讓 initialize 函數根據 css 確定畫布的大小！

響應您的編輯，更改您的 init 函數：

function init()
{
    canvas = document.getElementById("mainCanvas");
    canvas.width = document.body.clientWidth; //document.width is obsolete
    canvas.height = document.body.clientHeight; //document.height is obsolete
    canvasW = canvas.width;
    canvasH = canvas.height;

    if( canvas.getContext )
    {
        setup();
        setInterval( run , 33 );
    }
}

還要從包裝器中刪除所有 css，這只會使東西變得垃圾。 你必須編輯 js 才能完全擺脫它們......雖然我能夠全屏顯示。

html, body {
    overflow: hidden;
}

編輯： document.width和document.height已過時。 替換為document.body.clientWidth和document.body.clientHeight

Answer 2

您可以將以下內容插入到您的主 html 頁面或函數中：

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

然后刪除頁面上的邊距

html, body {
    margin: 0 !important;
    padding: 0 !important;
}

那應該做的工作

Answer 3

最新的 Chrome 和 Firefox 支持全屏 API，但設置為全屏就像調整窗口大小。 監聽 window-object 的 onresize-Event：

$(window).bind("resize", function(){
    var w = $(window).width();
    var h = $(window).height();

    $("#mycanvas").css("width", w + "px");
    $("#mycanvas").css("height", h + "px"); 
});

//using HTML5 for fullscreen (only newest Chrome + FF)
$("#mycanvas")[0].webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT); //Chrome
$("#mycanvas")[0].mozRequestFullScreen(); //Firefox

//...

//now i want to cancel fullscreen
document.webkitCancelFullScreen(); //Chrome
document.mozCancelFullScreen(); //Firefox

這不適用於每個瀏覽器。 您應該檢查這些函數是否存在，否則它會拋出一個 js 錯誤。

有關 html5-fullscreen 的更多信息，請查看： http : //updates.html5rocks.com/2011/10/Let-Your-Content-Do-the-Talking-Fullscreen-API

Answer 4

您需要做的就是將寬度和高度屬性動態設置為畫布的大小。 所以你使用 CSS 讓它在整個瀏覽器窗口上伸展，然后你在 javascript 中有一個小函數來測量寬度和高度，並分配它們。 我不是很熟悉 jQuery，所以考慮這個偽代碼：

window.onload = window.onresize = function() {
  theCanvas.width = theCanvas.offsetWidth;
  theCanvas.height = theCanvas.offsetHeight;
}

元素的寬度和高度屬性決定了它在內部渲染緩沖區中使用的像素數。 將這些更改為新數字會導致畫布使用不同大小的空白緩沖區重新初始化。 如果寬度和高度屬性與實際現實世界的像素寬度和高度不一致，瀏覽器只會拉伸圖形。

Answer 5

因為它還沒有發布並且是一個簡單的 css 修復：

#canvas {
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
}

如果您想應用全屏畫布背景（例如使用 Granim.js），效果會很好。

Answer 6

在文檔加載時設置

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

Answer 7

A - 如何計算全屏寬度和高度

這是功能;

canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

檢查了這 出

B - 如何通過調整大小使全屏穩定

這是resize事件的resize方法；

function resizeCanvas() {
    canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

    WIDTH = canvas.width;
    HEIGHT = canvas.height;

    clearScreen();
}

C - 如何擺脫滾動條

簡單地；

<style>
    html, body {
        overflow: hidden;
    }
</style>

D - 演示代碼

 <html> <head> <title>Full Screen Canvas Example</title> <style> html, body { overflow: hidden; } </style> </head> <body onresize="resizeCanvas()"> <canvas id="mainCanvas"> </canvas> <script> (function () { canvas = document.getElementById('mainCanvas'); ctx = canvas.getContext("2d"); canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; WIDTH = canvas.width; HEIGHT = canvas.height; clearScreen(); })(); function resizeCanvas() { canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; WIDTH = canvas.width; HEIGHT = canvas.height; clearScreen(); } function clearScreen() { var grd = ctx.createLinearGradient(0,0,0,180); grd.addColorStop(0,"#6666ff"); grd.addColorStop(1,"#aaaacc"); ctx.fillStyle = grd; ctx.fillRect( 0, 0, WIDTH, HEIGHT ); } </script> </body> </html>

Answer 8

我希望它會很有用。

// Get the canvas element
var canvas = document.getElementById('canvas');

var isInFullScreen = (document.fullscreenElement && document.fullscreenElement !== null) ||
    (document.webkitFullscreenElement && document.webkitFullscreenElement !== null) ||
    (document.mozFullScreenElement && document.mozFullScreenElement !== null) ||
    (document.msFullscreenElement && document.msFullscreenElement !== null);

// Enter fullscreen
function fullscreen(){
    if(canvas.RequestFullScreen){
        canvas.RequestFullScreen();
    }else if(canvas.webkitRequestFullScreen){
        canvas.webkitRequestFullScreen();
    }else if(canvas.mozRequestFullScreen){
        canvas.mozRequestFullScreen();
    }else if(canvas.msRequestFullscreen){
        canvas.msRequestFullscreen();
    }else{
        alert("This browser doesn't supporter fullscreen");
    }
}

// Exit fullscreen
function exitfullscreen(){
    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    }else{
        alert("Exit fullscreen doesn't work");
    }
}

Answer 9

function resize() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    render();
}
window.addEventListener('resize', resize, false); resize();
function render() { // draw to screen here
}

https://jsfiddle.net/jy8k6hfd/2/

Answer 10

很簡單，將畫布寬度和高度設置為screen.width 和screen.height。 然后按F11！ 認為 F11 應該在大多數瀏覽器中全屏顯示在 FFox 和 IE 中。

Answer 11

如果您想在演示文稿中顯示它，請考慮使用 requestFullscreen()方法

let canvas = document.getElementById("canvas_id");
canvas.requestFullscreen();

無論當前情況如何，這都應該使其全屏顯示。

還要檢查支持表https://caniuse.com/?search=requestFullscreen

Answer 12

AFAIK，HTML5 不提供支持全屏的 API。

這個問題有一些關於制作 html5 視頻全屏的觀點，例如在 webkit 中使用webkitEnterFullscreen 。
有沒有辦法讓html5視頻全屏

Answer 13

您可以捕獲窗口調整大小事件並將畫布的大小設置為瀏覽器的視口。

Answer 14

獲取屏幕的完整寬度和高度，並創建一個設置為適當寬度和高度的新窗口，並禁用所有內容。 在該新窗口內創建一個畫布，將畫布的寬度和高度設置為寬度 - 10px 和高度 - 20px（以允許欄和窗口的邊緣）。 然后在畫布上施展你的魔法。

Answer 15

好吧，我也希望讓我的畫布全屏顯示，這就是我做到的。 我將發布整個 index.html，因為我還不是 CSS 專家：（基本上只使用 position:fixed 和寬度和高度為 100%，頂部和左側為 0%，我為每個標簽嵌套了這個 CSS 代碼。我也有 min-height 和 min-width 為 100%。當我嘗試使用 1px 邊框時，邊框大小隨着我放大和縮小而改變，但畫布保持全屏。）

 <!DOCTYPE html> <html style="position:fixed;min-height:100%;min-width:100%;height:100%;width:100%;top:0%;left:0%;resize:none;"> <head> <title>MOUSEOVER</title> <script "text/javascript" src="main.js"></script> </head> <body id="BODY_CONTAINER" style="position:fixed;min-height:100%;min-width:100%;height:100%;width:100%;top:0%;left:0%;resize:none;"> <div id="DIV_GUI_CONTAINER" style="position:fixed;min-height:100%;min-width:100%;height:100%;width:100%;top:0%;left:0%;resize:none;"> <canvas id="myCanvas" style="position:fixed;min-height:100%;min-width:100%;height:100%;width:100%;top:0%;left:0%;resize:none;"> </canvas> </div> </body> </html>

編輯：將此添加到畫布元素：

 <canvas id="myCanvas" width="" height="" style="position:fixed;min-height:100%;min-width:100%;height:100%;width:100%;top:0%;left:0%;resize:none;"> </canvas>

將此添加到javascript

canvas.width = window.screen.width;

canvas.height = window.screen.height;

我發現這使繪圖比我原來的評論更流暢。

謝謝。