为了始终使画布全屏显示宽度和高度,这意味着即使调整了浏览器的大小,也需要在将画布调整为window.innerHeight和window.innerWidth的函数中运行绘制循环。
HTML
<canvas id="canvas"></canvas>
Javascript
(function() { var canvas = document.getElementById('canvas'), context = canvas.getContext('2d'); // resize the canvas to fill browser window dynamically window.addEventListener('resize', resizeCanvas, false); function resizeCanvas() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; drawStuff(); } resizeCanvas(); function drawStuff() { // do your drawing stuff here }})();
CSS
* { margin:0; padding:0; } html, body { width:100%; height:100%; } canvas { display:block; }
这样可以正确地使画布达到浏览器的整个宽度和高度。您只需要在drawStuff()函数中将所有用于绘制的代码放到画布上即可。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)