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

【问题标题】：How to re-size canvas and draw image on canvas as perspective window size如何重新调整画布大小并在画布上绘制图像作为透视窗口大小
【发布时间】：2013-06-29 07:46:15
【问题描述】：

我是新的 html5 开发人员，开发了 html5 网络应用程序。在这个网络应用程序中，所有动画对象都显示在画布上。我想使用响应式 UI 调整所有资产。画布的高度和宽度会根据浏览器进行更改，但画布大小的子级仍然没有根据画布更改。

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

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

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

【问题讨论】：

这个问题的答案stackoverflow.com/questions/5517783/…会提供一些帮助。发布一些代码也有助于查明错误
它是如何实现的：当我在窗口调整大小时更改画布高度和宽度时，所有子项都会从画布中删除。为什么要移除资产？
@HarishPatidar 画布上没有孩子。画布是被动的，不知道你在上面画了什么。您需要跟踪和维护自己绘制的内容并在调整大小时重新绘制。

标签： html canvas html5-canvas

【解决方案1】：

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

当您通过更改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;

【讨论】：

【解决方案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';

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

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

【讨论】：