如何自动缩放 HTML5<canvas>元素以适合页面？
例如，我可以<div>通过将height和width属性设置为 100%来缩放，但是 a<canvas>不会缩放，是吗？
调整 HTML5 画布的大小以适合窗口
IT技术
javascript
html
html5-canvas
2021-02-04 14:59:44
6个回答
我相信我已经找到了一个优雅的解决方案：
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: 0;
}
到目前为止，对我没有任何大的负面性能影响。
以下解决方案对我来说效果最好。由于我对编码相对较新，因此我喜欢通过视觉确认某些事情正在按我期望的方式工作。我在以下站点找到它：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>
蓝色边框向您显示调整大小画布的边缘，并且始终沿着窗口的边缘，在所有 4 个边上都可见，而上述其他一些答案并非如此。希望能帮助到你。
基本上你需要做的是将 onresize 事件绑定到你的身体，一旦你捕捉到事件，你只需要使用 window.innerWidth 和 window.innerHeight 调整画布的大小。
<!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>
根据浏览器客户端的尺寸设置画布坐标空间宽度和高度需要您在调整浏览器大小时调整大小和重绘。
一个不太复杂的解决方案是在 Javascript 变量中维护可绘制尺寸，但根据 screen.width、screen.height 尺寸设置画布尺寸。使用 CSS 来适应：
#containingDiv {
overflow: hidden;
}
#myCanvas {
position: absolute;
top: 0px;
left: 0px;
}
浏览器窗口通常永远不会大于屏幕本身（除非屏幕分辨率被误报，因为它可能与不匹配的双显示器），因此背景不会显示并且像素比例不会变化。除非您使用 CSS 缩放画布，否则画布像素将与屏幕分辨率成正比。
甲纯CSS方法增加@jerseyboy上面的溶液中。
适用于 Firefox（在 v29 中测试）、Chrome（在 v34 中测试）和 Internet Explorer（在 v11 中测试）。
<!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 : //temporaer.net/open/so/140502_canvas-fit-to-window.html
但请注意，正如@jerseyboy 在评论中所说：
使用 CSS 重新缩放画布很麻烦。至少在 Chrome 和 Safari 上，鼠标/触摸事件位置不会与画布像素位置 1:1 对应，您必须转换坐标系。
其它你可能感兴趣的问题