-1

I am new html5 developer, developed html5 web application. In this web app all animated object are showing on canvas. I want to adjust all assets with responsive UI. canvas height and width are changed as per browser, but child's of canvas size is still not changed as per canvas.

How to re-size canvas and draw object in canvas, when window size is changed ??.

So all child in canvas are re-size or scale with responsive UI.

One more thing, when i changed canvas height and width on window resize, all children are remove from canvas. I not able to understand. why assets are remove ?

4

2 回答 2

3

画布是一个位图区域，当您在画布上绘制某些内容时，浏览器只会记住生成的位图。

当您通过更改canvas.width或canvas.height属性调整画布分辨率时，画布将被清除，所有位图信息都将丢失。因此，如果您不想丢失位图信息，您将需要一些策略来记住位图信息，调整画布大小，然后在调整大小的画布上重新绘制内容。

单击此处查看示例

或者，您可以将画布放在 div 容器中并通过 CSS 调整 div 的大小：

container.style.width = newWidthValue + "px";
container.style.height = newHeightValue + "px";

这样您就不需要记住在画布上绘制的内容并轻松调整画布大小，而不会造成任何损失。

单击此处查看示例

在上面的两个示例中，您可以通过设置来保持图像的纵横比

 var stretch_to_fit = false;

或者如果您不关心纵横比，只需将该变量设置为 true

var stretch_to_fit = true;
于 2013-07-01T16:23:20.327 回答
1

@Ken - AbdiasSoftware：如果我画一个图像，在画布上。喜欢

var c = $('#respondCanvas');
var ct = c.get(0).getContext('2d');

var imageObj = new Image();

imageObj.onload = function() {
    ct.drawImage(imageObj, 0, 0);
    };

imageObj.src = 'img/ballon.jpg';

现在根据窗口调整大小重新调整画布大小，那时图像不会重新调整大小并且也会从画布中删除。请告诉我，为什么不调整图像大小以及为什么将其从画布中删除？

如果我刷新浏览器，则图像在画布上可见，但图像比例仍然相同。

于 2013-07-01T04:31:52.347 回答