HTML 画布全屏

Posted 2023-03-05

技术标签:

【中文标题】HTML 画布全屏【英文标题】：HTML Canvas Full Screen 【发布时间】：2011-05-01 12:49:49 【问题描述】：

我正在使用 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();



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

【问题讨论】：

检查我的编辑以响应您的编辑。这个文档的 HTML 是什么？另见：***.com/questions/4288253 【参考方案1】：

javascript有

var canvasW     = 640;
var canvasH     = 480;

在里面。尝试更改这些以及画布的 css。

或者更好的是，让初始化函数根据 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 are obsolete。替换为document.body.clientWidth 和document.body.clientHeight

【讨论】：

虽然画布元素使用了视口的整个宽度，但高度却没有达到应有的效果。我错过了什么？【参考方案2】：

您可以在主 html 页面或函数中插入以下内容：

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

然后去除页面上的边距

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

这应该做的工作

【讨论】：

效果很好！也很简单！我只需要做body margin: 0 !important;填充：0！重要； 【参考方案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-error。

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

【讨论】：

您链接的文章推断此答案已过时。您可以考虑更新您的答案，或者我可以做到。感谢您提供有用的答案:)【参考方案4】：

您需要做的就是动态地将宽度和高度属性设置为画布的大小。因此，您使用 CSS 使其延伸到整个浏览器窗口，然后您在 javascript 中有一个小功能，可以测量宽度和高度，并分配它们。我对 jQuery 不是很熟悉，所以考虑一下这个伪代码：

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

元素的宽度和高度属性决定了它在其内部渲染缓冲区中使用了多少像素。将它们更改为新数字会导致画布使用不同大小的空白缓冲区重新初始化。如果宽度和高度属性与实际的真实世界像素宽度和高度不一致，浏览器只会拉伸图形。

【讨论】：

如果您正在寻找投影仪的实际全屏视图，可以使用功能强大的工具。例如，Opera 是一个支持全屏的网络浏览器，因此您可以手动将其切换到全屏进行演示。【参考方案5】：

因为它还没有发布并且是一个简单的 css 修复：

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

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

【讨论】：

这使渲染图像保持原始宽度，但随后会放大以适应屏幕。这会导致它看起来非常模糊。这很有效，非常感谢！ position: fixed; 终于让滚动条消失了，并且结合使用 javascript 设置 canvas.width = innerWidth 这就像一个魅力。有谁知道为什么设置位置固定可以解决这个问题？ Css 的东西看起来像是一堆你必须记住的任意参数【参考方案6】：

在文档加载时设置

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

【讨论】：

这会在 Firefox 上创建一个水平滚动条【参考方案7】：

A - 如何计算全屏宽度和高度

这里是函数；

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

查看out

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>

【讨论】：

【参考方案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");

【讨论】：

【参考方案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/

【讨论】：

【参考方案10】：

很简单，将画布的宽度和高度设置为screen.width和screen.height。然后按F11！认为 F11 应该在大多数浏览器中全屏显示在 FFox 和 IE 中。

【讨论】：

【参考方案11】：

如果您想在演示文稿中展示它，那么考虑使用 requestFullscreen() 方法

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

无论当前情况如何，它都应该全屏显示。

还可以查看支持表https://caniuse.com/?search=requestFullscreen

【讨论】：

【参考方案12】：

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

这个问题有一些关于使html5视频全屏的观点，例如在webkit中使用webkitEnterFullscreen。Is there a way to make html5 video fullscreen

【讨论】：

关于如何解决这个问题的任何想法？【参考方案13】：

您可以捕获窗口大小调整事件并将画布的大小设置为浏览器的视口。

【讨论】：

尝试现在使用 jquery 但似乎破坏了代码......有什么想法吗？在我原来的问题中添加了代码。【参考方案14】：

获取屏幕的完整宽度和高度，并创建一个设置为适当宽度和高度的新窗口，并禁用所有内容。在该新窗口内创建一个画布，将画布的宽度和高度设置为宽度 - 10 像素和高度 - 20 像素（以允许栏和窗口边缘）。然后在画布上施展你的魔法。

【讨论】：

【参考方案15】：

嗯，我也想让我的画布全屏，我就是这样做的。我将发布整个 index.html，因为我还不是 CSS 专家：（基本上只是使用 position:fixed 和 width 和 height 为 100%，top 和 left 为 0%，我为每个标签嵌套了这个 CSS 代码。我也有最小高度和最小宽度为 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"   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;

我发现这使绘图比我原来的评论更流畅。

谢谢。

【讨论】：

以上是关于HTML 画布全屏的主要内容，如果未能解决你的问题，请参考以下文章

h5 video切换到横屏全屏

ZFPlayer iOS16 系统横屏全屏问题处理

跳出小程序 video组件卡顿黑屏全屏等坑

电脑怎么全屏截图

HTML 画布全屏