调整 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 画布元素的大小的主要内容,如果未能解决你的问题,请参考以下文章

使用 jQuery (.animate) 和 KineticJS 框架调整画布大小

HTML5 响应式画布:调整浏览器画布绘制的大小消失

html5中怎么根据内容高低来调整画布大小

HTML5 画布:图像大小调整

按比例调整图像大小以适合 HTML5 画布

我们如何在 html5 画布上绘制调整大小的图像?