HTMLcanvas全屏

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

目前它被设置为640×480像素，但是我想把它放在全屏幕上，因为它会显示一个投影机。 然而，据我所知，我不能设置canvas大小为100％作为variables只有数字而不是％。 使用CSS只是拉伸它，而不是实际上全屏。

有任何想法吗？

编辑：试图find使用jQuery的高度和宽度，但它打破了canvas任何想法为什么？

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(); mx = canvasW * .5; my = 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 = mx; var y = my; 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; mx = nextX; my = 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; 

在里面。 尝试改变这些以及canvas的CSS。

或者更好的是，有初始化函数确定CSS的canvas的大小！

为了响应你的编辑，改变你的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来彻底摆脱它们，尽pipe…我能够把它全屏。

 html, body { overflow: hidden; } 

编辑 ： document.width和document.height 是过时的 。 用document.body.clientWidth和document.body.clientHeightreplace

Answer 2

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

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

这应该做的工作

Answer 3

最新的Chrome和Firefox支持全屏API，但设置为全屏就像是调整窗口大小。 听取窗口对象的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全屏的更多信息，请查看： http : //updates.html5rocks.com/2011/10/Let-Your-Content-Do-the-Talking-Fullscreen-API

Answer 4

您只需将width和height属性dynamic设置为canvas的大小即可。 因此，您使用CSS来使其在整个浏览器窗口上展开，然后在JavaScript中使用一个小函数来测量宽度和高度，并分配它们。 我不是jQuery的非常familliar，所以考虑这个psuedocode：

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

元素的宽度和高度属性决定了它在内部渲染缓冲区中使用了多less个像素。 将它们更改为新数字将导致canvas使用不同大小的空白缓冲区重新初始化。 如果宽度和高度属性与实际现实像素的宽度和高度不一致，则浏览器将仅拉伸graphics。

Answer 5

在文件加载设置

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

Answer 6

 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 7

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

Answer 8

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

这是function;

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

看看这个

B – 如何使全屏稳定resize

这里是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 9

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

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

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

Answer 10

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

这个问题有一些关于webkitEnterFullscreen在webkit中使用webkitEnterFullscreen制作html5video全屏的webkitEnterFullscreen 。
有没有办法使HTML5video全屏

Answer 11

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

Answer 12

获取屏幕的全部宽度和高度，并创build一个设置为适当宽度和高度的新窗口，并禁用所有内容。 在新窗口中创build一个canvas，将canvas的宽度和高度设置为宽度 – 10px和高度 – 20px（以允许窗口的边和条）。 然后在你的canvas上工作

Answer 13

我希望这会有用。

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