代码之家  ›  专栏  ›  技术社区  ›  Cameron

HTML画布全屏

  •  57
  • Cameron  · 技术社区  · 14 年前

    我正在使用HTML画布使用以下应用程序: 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();
    }
    
    
    // ==========================================================================================
    
    14 回复  |  直到 6 年前
        1
  •  48
  •   vallentin Remi    9 年前

    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
  •  32
  •   cheesey    6 年前

    您可以将以下内容插入到HTML主页或函数中:

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

    然后删除页边距

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

    那应该能完成任务

        3
  •  14
  •   Frederic    13 年前

    最新的Chrome和Firefox支持全屏API,但设置为全屏就像窗口大小调整。侦听窗口对象的OnResize事件:

    $(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全屏的更多信息,请查看: http://updates.html5rocks.com/2011/10/Let-Your-Content-Do-the-Talking-Fullscreen-API

        4
  •  8
  •   Blixxy    14 年前

    您只需要动态地将宽度和高度属性设置为画布的大小。因此,您可以使用CSS使其在整个浏览器窗口中延伸,然后在javascript中有一个小函数,用于测量宽度和高度,并对其进行分配。我不太熟悉jquery,所以考虑一下这个psuedocode:

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

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

        5
  •  6
  •   chillyistkult    8 年前

    因为它还没有发布,是一个简单的CSS修复:

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

    如果要应用全屏画布背景(例如granim.js),效果很好。

        6
  •  4
  •   Tamil Selvan C    10 年前

    在文档加载时设置

    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    
        7
  •  3
  •   Levent Divilioglu    8 年前

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

    功能如下:

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

    检查这个 out

    B-如何通过调整大小使全屏稳定

    这里是调整大小事件的调整大小方法;

    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
  •  1
  •   jaggedsoft    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/

        9
  •  1
  •   user6063291    9 年前

    很简单,将画布宽度和高度设置为screen.width和screen.height。然后按F11!认为在大多数浏览器中,f11应该在ffox和ie中实现全屏显示。

        10
  •  1
  •   hippietrail    7 年前

    我希望它会有用。

    // 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");
        }
    }
    
        11
  •  0
  •   Community CDub    8 年前

    HTML5不提供支持全屏的API。

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

        12
  •  0
  •   Jaime Garcia    14 年前

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

        13
  •  0
  •   Sean Vieira    14 年前

    获取屏幕的完整宽度和高度,并创建一个新窗口,设置为适当的宽度和高度,同时禁用所有内容。在新窗口内创建画布,将画布的宽度和高度设置为宽度-10px和高度-20px(以允许窗口的条和边)。然后在画布上施展你的魔法。

        14
  •  0
  •   s-s    6 年前

    好吧,我也想把我的画布做成全屏,这就是我做的。我将发布整个index.html,因为我还不是CSS专家:(基本上只是使用位置:固定,宽度和高度为100%,顶部和左侧为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元素:

    <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;

    我发现这使得我的画比我最初的评论更流畅。

    谢谢。