调整HTML5canvas以适应窗口
如何自动缩放HTML5 <canvas>元素以适应页面？
例如，我可以通过将height和width属性设置为100％来缩放<div> ，但是<canvas>不会缩放，是不是？
我相信我已经find了一个优雅的解决scheme：
JavaScript的
/* important! for alignment, you should make things * relative to the canvas' current width/height. */ function draw() { var ctx = (a canvas context); ctx.canvas.width = window.innerWidth; ctx.canvas.height = window.innerHeight; //...drawing code... }
CSS
html, body { width: 100%; height: 100%; margin: 0px; }
到目前为止，对我来说没有任何大的负面影响。
以下解决scheme为我工作最好。 由于我对编码比较陌生，所以我希望能够通过视觉确认某件事正在按照我所期望的方式工作。 我发现它在以下网站： http : //htmlcheats.com/html/resize-the-html5-canvas-dyamically/
代码如下：
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>Resize HTML5 canvas dynamically | www.htmlcheats.com</title> <style> html, body { width: 100%; height: 100%; margin: 0px; border: 0; overflow: hidden; /* Disable scrollbars */ display: block; /* No floating content on sides */ } </style> </head> <body> <canvas id='c' style='position:absolute; left:0px; top:0px;'> </canvas> <script> (function() { var // Obtain a reference to the canvas element using its id. htmlCanvas = document.getElementById('c'), // Obtain a graphics context on the canvas element for drawing. context = htmlCanvas.getContext('2d'); // Start listening to resize events and draw canvas. initialize(); function initialize() { // Register an event listener to call the resizeCanvas() function // each time the window is resized. window.addEventListener('resize', resizeCanvas, false); // Draw canvas border for the first time. resizeCanvas(); } // Display custom canvas. In this case it's a blue, 5 pixel // border that resizes along with the browser window. function redraw() { context.strokeStyle = 'blue'; context.lineWidth = '5'; context.strokeRect(0, 0, window.innerWidth, window.innerHeight); } // Runs each time the DOM window resize event fires. // Resets the canvas dimensions to match window, // then draws the new borders accordingly. function resizeCanvas() { htmlCanvas.width = window.innerWidth; htmlCanvas.height = window.innerHeight; redraw(); } })(); </script> </body> </html>
蓝色边框向您显示resizecanvas的边缘，并始终沿着窗口的边缘，在所有4边都可见，而其他一些答案则不是这样。 希望它有帮助。
基本上你所要做的就是将onresize事件绑定到你的body上，一旦你捕捉到事件，你只需要使用window.innerWidth和window.innerHeight调整canvas的大小。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Canvas Resize</title> <script type="text/javascript"> function resize_canvas(){ canvas = document.getElementById("canvas"); if (canvas.width < window.innerWidth) { canvas.width = window.innerWidth; } if (canvas.height < window.innerHeight) { canvas.height = window.innerHeight; } } </script> </head> <body onresize="resize_canvas()"> <canvas id="canvas">Your browser doesn't support canvas</canvas> </body> </html>
根据浏览器客户端的尺寸设置canvas坐标空间宽度和高度，需要resize并在浏览器resize时重新绘制。
一个不太复杂的解决scheme是在Javascriptvariables中维护可绘制维度，但是根据screen.width，screen.height维度设置canvas维度。 使用CSS来适应：
#containingDiv { overflow: hidden; } #myCanvas { position: absolute; top: 0px; left: 0px; }
浏览器窗口通常不会比屏幕本身大（除非屏幕分辨率被错误报告，因为它可能与不匹配的双显示器），所以背景不会显示，像素比例不会变化。 除非使用CSS缩放canvas，否则canvas像素将与屏幕分辨率成正比。
function resize() { var canvas = document.getElementById('game'); var canvasRatio = canvas.height / canvas.width; var windowRatio = window.innerHeight / window.innerWidth; var width; var height; if (windowRatio < canvasRatio) { height = window.innerHeight; width = height / canvasRatio; } else { width = window.innerWidth; height = width * canvasRatio; } canvas.style.width = width + 'px'; canvas.style.height = height + 'px'; }; window.addEventListener('resize', resize, false);
纯粹的CSS方法添加到@jerseyboy上面的解决scheme。
适用于Firefox（经过v29testing），Chrome（经v34testing）和Internet Explorer（经v11testing）。
<!DOCTYPE html> <html> <head> <style> html, body { width: 100%; height: 100%; margin: 0; } canvas { background-color: #ccc; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; } </style> </head> <body> <canvas id="canvas" width="500" height="500"></canvas> <script> var canvas = document.getElementById('canvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.fillRect(25,25,100,100); ctx.clearRect(45,45,60,60); ctx.strokeRect(50,50,50,50); } </script> </body> </html>
链接到这个例子： http : //temporaryer.net/open/so/140502_canvas-fit-to-window.html
但要小心，正如@ jerseyboy在评论中所说：
使用CSS缩放canvas很麻烦。 至less在Chrome和Safari上，鼠标/触摸事件位置不会与canvas像素位置1：1相对应，您必须转换坐标系。
除非你想让canvas自动调高图像数据（这就是James Black的答案所说的，但看起来不会很漂亮），你必须自己resize，然后重新绘制图像。 居中canvas
如果你的div完全填充了网页，那么你可以填写该div，所以有一个canvas，填补了股利。
您可能会觉得这很有趣，因为您可能需要使用CSS来使用百分比，但是，这取决于您使用的是哪种浏览器，以及与规范相符多less： http : //www.whatwg.org/规格/networking应用/电stream工作/多页/的帆布，element.html＃的canvas元素
canvas元素的固有尺寸等于坐标空间的大小，数字解释为CSS像素。 但是，元素可以通过样式表任意resize。 在渲染过程中，图像被缩放以适应这种布局大小。
您可能需要获取div的offsetWidth和height，或者获取窗口高度/宽度并将其设置为像素值。
如果你有兴趣保持宽高比，并在纯CSS（给定长宽比），你可以做下面的事情。 关键是::content元素上的padding-bottom ，它用于container元素的大小。 这是相对于其父母的宽度，这是默认的100% 。 此处指定的比率必须与canvas元素上尺寸的比例相匹配。
// Javascript var canvas = document.querySelector('canvas'), context = canvas.getContext('2d'); context.fillStyle = '#ff0000'; context.fillRect(500, 200, 200, 200); context.fillStyle = '#000000'; context.font = '30px serif'; context.fillText('This is some text that should not be distorted, just scaled', 10, 40);
/*CSS*/ .container { position: relative; background-color: green; } .container::after { content: ' '; display: block; padding: 0 0 50%; } .wrapper { position: absolute; top: 0; right: 0; left: 0; bottom: 0; } canvas { width: 100%; height: 100%; }
<!-- HTML --> <div class=container> <div class=wrapper> <canvas width=1200 height=600></canvas> </div> </div>
CSS
body { margin: 0; } canvas { display: block; }
JavaScript的
window.addEventListener("load", function() { var canvas = document.createElement('canvas'); document.body.appendChild(canvas); var context = canvas.getContext('2d'); function draw() { context.clearRect(0, 0, canvas.width, canvas.height); context.beginPath(); context.moveTo(0, 0); context.lineTo(canvas.width, canvas.height); context.moveTo(canvas.width, 0); context.lineTo(0, canvas.height); context.stroke(); } function resize() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; draw(); } window.addEventListener("resize", resize); resize(); });
(function() { // get viewport size getViewportSize = function() { return { height: window.innerHeight, width: window.innerWidth }; }; // update canvas size updateSizes = function() { var viewportSize = getViewportSize(); $('#myCanvas').width(viewportSize.width).height(viewportSize.height); $('#myCanvas').attr('width', viewportSize.width).attr('height', viewportSize.height); }; // run on load updateSizes(); // handle window resizing $(window).on('resize', function() { updateSizes(); }); }());
我想这是我们应该做的： http : //www.html5rocks.com/en/tutorials/casestudies/gopherwoord-studios-resizing-html5-games/
function resizeGame() { var gameArea = document.getElementById('gameArea'); var widthToHeight = 4 / 3; var newWidth = window.innerWidth; var newHeight = window.innerHeight; var newWidthToHeight = newWidth / newHeight; if (newWidthToHeight > widthToHeight) { newWidth = newHeight * widthToHeight; gameArea.style.height = newHeight + 'px'; gameArea.style.width = newWidth + 'px'; } else { newHeight = newWidth / widthToHeight; gameArea.style.width = newWidth + 'px'; gameArea.style.height = newHeight + 'px'; } gameArea.style.marginTop = (-newHeight / 2) + 'px'; gameArea.style.marginLeft = (-newWidth / 2) + 'px'; var gameCanvas = document.getElementById('gameCanvas'); gameCanvas.width = newWidth; gameCanvas.height = newHeight; } window.addEventListener('resize', resizeGame, false); window.addEventListener('orientationchange', resizeGame, false);
我正在使用sketch.js，所以在运行canvas的init命令后，我用jquery更改宽度和高度。 它基于父元素的尺寸。
$（ '＃DrawCanvas'）。素描（）。ATTR（ '高度'，$（ '＃DrawCanvas'）。亲本（）。高度（））。ATTR（ '宽度'，$（ '＃DrawCanvas'）。亲（）。宽度（））;
