javascript 调整 HTML5 画布元素的大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8693949/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Resize HTML5 canvas element
提问by shub
How can I achieve, so that the HTML5 canvas element ist resizeable?
我该如何实现，以便 HTML5 画布元素可调整大小？
I would like to implement this element so that you can scale it in any size. The event of the scaling should be the mouse which snaps the edge and the user resizes the element.
我想实现此元素，以便您可以将其缩放为任何大小。缩放事件应该是捕捉边缘和用户调整元素大小的鼠标。
I've already read about how you can achieve this on a object in the canvas element. But in my case I need this on the canvas element itself (<canvas>).
我已经阅读了有关如何在 canvas 元素中的对象上实现此目的的信息。但就我而言，我需要在画布元素本身 ( <canvas>) 上使用它。
回答by Matt Greer
Setting a canvas's width or height properties has the effect of clearing the canvas. Even canvas.width = canvas.width; will cause you to lose everything in the canvas. Sometimes this is desirable, but in your case it probably isn't.
设置画布的宽度或高度属性具有清除画布的效果。甚至canvas.width = canvas.width; 将导致您丢失画布中的所有内容。有时这是可取的，但在您的情况下可能不是。
What you will probably need to do is something like this
你可能需要做的是这样的事情
var myCanvas = document.getElementById('myCanvas');
var tempCanvas = document.createElement('canvas');
tempCanvas.width = myCanvas.width;
tempCanvas.height = myCanvas.height;
// save your canvas into temp canvas
tempCanvas.getContext('2d').drawImage(myCanvas, 0, 0);
// resize my canvas as needed, probably in response to mouse events
myCanvas.width = newWidth;
myCanvas.height = newHeight;
// draw temp canvas back into myCanvas, scaled as needed
myCanvas.getContext('2d').drawImage(tempCanvas, 0, 0, tempCanvas.width, tempCanvas.height, 0, 0, myCanvas.width, myCanvas.height);
In most browsers, the scaling will be done with a bicubic scaling algorithm, causing it to get blurry. In some cases you can set a CSS property to cause nearest neighbor on the canvas if you want, but browser support for this is very spotty right now. You can instead manually do a nearest neighbor scale , as this question shows: How to stretch images with no antialiasing
在大多数浏览器中，缩放将使用双三次缩放算法完成，导致它变得模糊。在某些情况下，如果需要，您可以设置 CSS 属性以在画布上产生最近的邻居，但目前浏览器对此的支持非常参差不齐。您可以改为手动执行最近邻尺度，如此问题所示：如何在没有抗锯齿的情况下拉伸图像
Alternative CSS Approach
替代 CSS 方法
Another approach is to scale the canvas using CSS. In Chrome/Safari/IE you can just do:
另一种方法是使用 CSS 缩放画布。在 Chrome/Safari/IE 中，您可以执行以下操作：
<canvas style="zoom:200%" />
In Firefox, you can use a scale transform to achieve the same effect:
在 Firefox 中，您可以使用缩放变换来实现相同的效果：
<canvas style="-moz-transform:scale(2)" />
In many ways this approach is easier, but it comes with its own little gotchas and browser specific quirks.
在许多方面，这种方法更容易，但它有自己的小问题和浏览器特定的怪癖。
回答by Stephen Gennard
I think you need to bind the onresize event to your body of document.
我认为您需要将 onresize 事件绑定到您的文档正文。
Then inside the the event you need to resize the canvas using window.innerWidth and window.innerHeight.
然后在事件内部，您需要使用 window.innerWidth 和 window.innerHeight 调整画布的大小。
Have a look @ http://kile.stravaganza.org/lab/js/canvas_resize/(view source)
回答by Jog Dan
Although it's a bit late to answer this question, I'd like to share what I found to solve the same question. Take it a look please.
虽然回答这个问题有点晚了，但我想分享我发现解决同一问题的方法。请看一下。
panel.css
面板.css
#Panel {
width: 100%;
height: 30%;
}
app.js
应用程序.js
var widthG = 0, height=G = 0;
function updateScale() {
widthG = parseInt($('#Panel').width());
heightG = parseInt($('#anel').height());
}
...
function updateCanvas() {
ctx = $('#canvas').get(0).getContext('2d');
ctx.clearRect(0,0,ctx.canvas.width, ctx.canvas.height);
ctx.canvas.width = widthG;
ctx.canvas.width = heightG;
}
I also tried to re-assign these properties by css syntax, but it doesn't work.
我也尝试通过 css 语法重新分配这些属性，但它不起作用。
$('#canvas').width(panelW);
$('#canvas').height(panelH);
Hope this helps ppl suffered from the same question.
希望这可以帮助遇到同样问题的人。
