调整 HTML5 画布元素的大小
Posted
技术标签:
【中文标题】调整 HTML5 画布元素的大小【英文标题】:Resize HTML5 canvas element 【发布时间】:2012-01-31 09:52:28 【问题描述】:如何实现,让 html5 canvas 元素可以调整大小?
我想实现这个元素,以便您可以将其缩放为任意大小。缩放的事件应该是鼠标捕捉边缘并且用户调整元素的大小。
我已经阅读了有关如何在 canvas 元素中的对象上实现这一点的信息。但就我而言,我需要在画布元素本身上使用它 (<canvas>
)。
【问题讨论】:
这可能是重复的:***.com/questions/331052/… 看看我的实现:***.com/a/23128583/1265753 【参考方案1】:我认为您需要将 onresize 事件绑定到您的文档正文。
然后在事件内部,您需要使用 window.innerWidth 和 window.innerHeight 调整画布大小。
看看@http://kile.stravaganza.org/lab/js/canvas_resize/(查看源代码)
【讨论】:
【参考方案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)" />
在许多方面,这种方法更容易,但它也有自己的小问题和特定于浏览器的怪癖。
【讨论】:
【参考方案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);
希望这对遇到同样问题的人有所帮助。
【讨论】:
以上是关于调整 HTML5 画布元素的大小的主要内容,如果未能解决你的问题,请参考以下文章