HTML Canvas全屏 [英] HTML Canvas Full Screen

问题描述

我正在使用HTML画布玩下列应用程序： http://driz.co.uk/粒子/

目前它被设置为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; 
 
 
 
函数init（）
 {
 canvas = document.getElementById（mainCanvas）; 
 
 if（canvas.getContext）
 {
 setup（）; 
 setInterval（run，33）; 
 
 
 
函数设置（）
 {
 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; 
} 
 
函数run（）
 {
 ctx.globalCompositeOperation =source-over; 
 ctx.fillStyle =rgba（8,8,12，.65）; 
 ctx.fillRect（0，0，canvasW，canvasH）; 
 ctx.globalCompositeOperation =打火机; 
 
 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  {
 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; （d  {
 var mAcc =（1  - （d / stirDist））* canvasW * .00022; 
} 
 
 
 vX + = mouseVX * mAcc; 
 vY + = mouseVY * mAcc; 
} 
 
 
 vX * =摩擦; 
 vY * =摩擦; 
 
 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; 
} 
否则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）; 
} 
 
 
函数onDocMouseMove（e）
 {
 var ev = e？ e：window.event; 
 mouseX = ev.clientX  -  outerDiv.offsetLeft  -  canvasDiv.offsetLeft; 
 mouseY = ev.clientY  -  outerDiv.offsetTop  -  canvasDiv.offsetTop; 
} 
 
函数onDocMouseDown（e）
 {
 isMouseDown = true; 
返回false; 
} 
 
函数onDocMouseUp（e）
 {
 isMouseDown = true; 
返回false; 
} 
 
 
 
 // =========================== ================================================== ============= 
 
 
函数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; 
} 
 
 
 // =============================== ================================================== ========= 
 
 
函数rect（context，x，y，w，h）
 {
 context.beginPath（）; 
 context.rect（x，y，w，h）; 
 context.closePath（）; 
 context.fill（）; 
} 
 
 
 // =============================== ================================================== ========= 
  

解决方案

javascript有

  var canvasW = 640; 
 var canvasH = 480; 
  

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

或者更好的办法是让initialize函数从css中确定画布的大小！

响应你的编辑，改变你的init函数：
$ b $ pre $ function init（）
{
canvas = document.getElementById（mainCanvas）;
canvas.width = document.body.clientWidth; //document.width已过时
canvas.height = document.body.clientHeight; //document.height已过时
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

I'm playing with the following application using the HTML Canvas: http://driz.co.uk/particles/

At the moment it is set to 640x480 pixels, but I would like to make it full screen as it will be shown a projector. However as far as I can tell I cannot set the canvas size to be 100% as the variables only except numbers and not the %. Using CSS just stretches it rather than making it actual full screen.

Any ideas?

EDIT: Tried finding the height and width using jQuery but it breaks the canvas any ideas why?

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();
}


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

解决方案

The javascript has

var canvasW     = 640;
var canvasH     = 480;

in it. Try changing those as well as the css for the canvas.

Or better yet, have the initialize function determine the size of the canvas from the css!

in response to your edits, change your init function:

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

Also remove all the css from the wrappers, that just junks stuff up. You have to edit the js to get rid of them completely though... I was able to get it full screen though.

html, body {
    overflow: hidden;
}

Edit: document.width and document.height are obsolete. Replace with document.body.clientWidth and document.body.clientHeight

这篇关于HTML Canvas全屏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！