[英]Resize HTML5 canvas element
我怎样才能实现,以便HTML5 canvas元素可以调整大小?
我想实现这个元素,以便您可以以任何大小缩放它。 缩放的事件应该是捕捉边缘并且用户调整元素大小的鼠标。
我已经阅读过如何在canvas元素中的对象上实现这一点。 但在我的情况下,我需要在canvas元素本身( <canvas>
)上。
设置画布的宽度或高度属性具有清除画布的效果。 甚至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缩放画布。 在Chrome / Safari / IE中你可以这样做:
<canvas style="zoom:200%" />
在Firefox中,您可以使用缩放变换来实现相同的效果:
<canvas style="-moz-transform:scale(2)" />
在许多方面,这种方法更容易,但它带有自己的小问题和浏览器特定的怪癖。
我认为您需要将onresize事件绑定到您的文档正文。
然后在事件内部,您需要使用window.innerWidth和window.innerHeight调整画布大小。
看看@ http://kile.stravaganza.org/lab/js/canvas_resize/ (查看源代码)
虽然回答这个问题有点迟,但我想分享我发现的解决同一个问题的方法。 好好看看吧。
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);
希望这有助于ppl遭受同样的问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.