如何重新调整画布大小并在画布上绘制图像作为透视窗口大小 [英] How to re-size canvas and draw image on canvas as perspective window size

问题描述

我是新的html5开发人员，开发了html5网络应用程序。在此Web应用程序中，所有动画对象都显示在画布上。我想使用响应式UI调整所有资源。画布高度和宽度根据浏览器而改变，但是画布尺寸的孩子仍然没有按照画布改变。

如何在画布中调整画布和绘制对象，当窗口大小更改时？

因此，所有在画布中的孩子都可以通过响应式UI进行缩放或缩放。

我改变了画布的高度和宽度在窗口调整大小，所有的孩子都从画布上删除。我不能理解。为什么资产被删除？

请帮助我，很紧急。

谢谢Q.

$ b $

b

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

点击此处查看示例

---

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

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

这样，你不需要记住在画布上绘制什么，没有损失。

点击这里查看示例

---

在上述两个示例中，您可以通过设置保持图像的宽高比

  var stretch_to_fit = false; 
  

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

  var stretch_to_fit = true; 
  

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 ?

Please help me, it's urgent.

Thank Q.

解决方案

Canvas is a bitmap region and when you draw something on canvas, only the resulting bitmap will be remembered by the browser.

When you resize the canvas resolution by changing canvas.width or canvas.height properties, canvas will be cleared and all the bitmap information will be lost. So, if you don't want to loose the bitmap information you will need some strategies to remember the bitmap information, resize the canvas and then redraw things on resized canvas.

CLICK HERE TO VIEW AN EXAMPLE

---

Alternatively, you could put the canvas inside a div container and resize the div via CSS:

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

This way you don't need to remember what was drawn on canvas and easily resizes the canvas, with no losses.

CLICK HERE TO VIEW AN EXAMPLE

---

In both examples above you could maintain the aspect ratio of the image by setting

 var stretch_to_fit = false;

or if you do not care about aspect ratio just set that variable to true

var stretch_to_fit = true;

这篇关于如何重新调整画布大小并在画布上绘制图像作为透视窗口大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！