Question

我是新的html5开发人员，开发了html5 web应用程序。在此Web应用程序中，所有动画对象都显示在画布上。我想用响应式UI调整所有资产。画布高度和宽度按浏览器更改，但画布大小的子画面仍未按画布更改。

当窗口大小改变时，如何在画布中重新调整画布大小和绘制对象 ??。

因此，画布中的所有孩子都可以通过响应式UI重新调整大小或缩放。

还有一件事，当我在窗口调整大小时更改画布高度和宽度时，所有子项都将从画布中删除。我无法理解。为什么资产被删除？

Answer 1

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

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

CLICK HERE TO VIEW AN EXAMPLE

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

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

通过这种方式，您无需记住在画布上绘制的内容，并且可以轻松调整画布大小，而且不会丢失。

CLICK HERE TO VIEW AN EXAMPLE

在上面的两个示例中，您可以通过设置

来保持图像的纵横比

 var stretch_to_fit = false;

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

var stretch_to_fit = true;

Answer 2

@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';

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

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

如何重新调整画布大小并在画布上绘制图像作为透视窗口大小

2 个答案: