调整 HTML5 画布元素的大小

Question

如何实现，让 HTML5 canvas 元素可以调整大小？

我想实现这个元素，以便您可以将其缩放为任意大小。缩放的事件应该是鼠标捕捉边缘并且用户调整元素的大小。

我已经阅读了有关如何在 canvas 元素中的对象上实现这一点的信息。但就我而言，我需要在画布元素本身上使用它 (<canvas>)。

Answer 1

我认为您需要将 onresize 事件绑定到您的文档正文。

然后在事件内部，您需要使用 window.innerWidth 和 window.innerHeight 调整画布大小。

看看@http://kile.stravaganza.org/lab/js/canvas_resize/（查看源代码）

Answer 2

设置画布的宽度或高度属性具有清除画布的效果。甚至canvas.width = canvas.width；会导致你失去画布上的一切。有时这是可取的，但在您的情况下可能不是。

你可能需要做的是这样的事情

 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);

在大多数浏览器中，缩放将使用双三次缩放算​​法完成，导致它变得模糊。在某些情况下，您可以根据需要设置 CSS 属性以在画布上生成最近邻，但目前浏览器对此的支持非常参差不齐。您可以改为手动执行最近邻缩放，如此问题所示：How to stretch images with no antialiasing

替代 CSS 方法

另一种方法是使用 CSS 缩放画布。在 Chrome/Safari/IE 中，您可以这样做：

<canvas style="zoom:200%" />

在 Firefox 中，您可以使用缩放变换来达到相同的效果：

<canvas style="-moz-transform:scale(2)" />

在许多方面，这种方法更容易，但它也有自己的小问题和特定于浏览器的怪癖。

Answer 3

虽然回答这个问题有点晚了，但我想分享一下我发现的解决相同问题的方法。请看一下。

panel.css

#Panel {
width:  100%;
height: 30%;
}

app.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;
}

我也尝试过通过css语法重新分配这些属性，但是没有用。

$('#canvas').width(panelW);
$('#canvas').height(panelH);      

希望这对遇到同样问题的人有所帮助。