如何实现 HTML5 canvas 元素可调整大小?
我想实现此元素,以便您可以将其缩放为任意大小。缩放事件应该是鼠标捕捉到边缘并且用户调整元素的大小。
我已经了解了如何在 Canvas 元素中的对象上实现这一点。但就我而言,我需要在 Canvas 元素本身 ( <canvas>
) 上使用它。
最佳答案
设置 Canvas 的宽度或高度属性具有清除 Canvas 的效果。甚至 canvas.width = canvas.width
;会让你失去 Canvas 上的一切。有时这是可取的,但在您的情况下可能不是。
你可能需要做的是这样的事情
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 属性以在 Canvas 上生成最近的邻居,但目前浏览器对此的支持非常不稳定。您可以改为手动执行最近邻比例,如以下问题所示:How to stretch images with no antialiasing
替代 CSS 方法
另一种方法是使用 CSS 缩放 Canvas 。在 Chrome/Safari/IE 中你可以这样做:
<canvas style="zoom:200%" />
在 Firefox 中,您可以使用缩放变换来实现相同的效果:
<canvas style="-moz-transform:scale(2)" />
在许多方面,这种方法更简单,但它有自己的小陷阱和特定于浏览器的怪癖。
关于javascript - 调整 HTML5 Canvas 元素的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8693949/