调整HTML5画布元素的大小

Question

我怎样才能实现,以便HTML5 canvas元素可以调整大小？

我想实现这个元素,以便您可以以任何大小缩放它.缩放的事件应该是捕捉边缘并且用户调整元素大小的鼠标.

我已经阅读过如何在canvas元素中的对象上实现这一点.但在我的情况下,我需要在canvas元素本身(<canvas>)上.

Answer 1

设置画布的宽度或高度属性具有清除画布的效果.甚至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属性以在画布上生成最近邻居,但是浏览器对此的支持现在非常不稳定.您可以手动执行最近邻居比例,因为此问题显示:如何在不使用抗锯齿的情况下拉伸图像

替代CSS方法

另一种方法是使用CSS缩放画布.在Chrome/Safari/IE中你可以这样做:

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

在Firefox中,您可以使用缩放变换来实现相同的效果:

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

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