如何动态缩放HTML5< canvas>元件？ [英] How do I dynamically scale the HTML5 <canvas> element?

问题描述

我想通过在角落拖动来调整画布元素的大小。

分享任何提示。

谢谢

解决方案

可以通过使用数字指定宽度和高度属性来更改大小：

  canvasNode.width = 200; //以像素为单位
 canvasNode.height = 100; //以像素为单位
  

至少它对我有用。确保你没有指定字符串（例如，2cm，3in或2.5px），并且不要混淆样式。

实际上这是一个公开的知识 - 您可以在HTML画布规范中阅读所有相关内容 - 它非常小且非常有用。这是整个DOM接口：

  interface HTMLCanvasElement：HTMLElement {
 attribute unsigned long width; 
属性unsigned long height; 
 
 DOMString toDataURL（）; 
 DOMString toDataURL（在DOMString类型中，任何args中的[Variadic]）; 
 
 DOMObject getContext（在DOMString contextId中）; 
}; 
  

正如您所看到的，它定义了2个属性的宽度和高度，并且它们都是无符号长整数。 / p>

使用css3你也可以设置属性

  resize：both both ; 
  

I want to resize the canvas element by dragging at corners.

share any hints.

thanks

解决方案

it is possible to change the size by assigning width and height attributes using numbers:

canvasNode.width  = 200; // in pixels
canvasNode.height = 100; // in pixels

At least it works for me. Make sure you don't assign strings (e.g., "2cm", "3in", or "2.5px"), and don't mess with styles.

Actually this is a publicly available knowledge — you can read all about it in the HTML canvas spec — it is very small and unusually informative. This is the whole DOM interface:

interface HTMLCanvasElement : HTMLElement {
           attribute unsigned long width;
           attribute unsigned long height;

  DOMString toDataURL();
  DOMString toDataURL(in DOMString type, [Variadic] in any args);

  DOMObject getContext(in DOMString contextId);
};

As you can see it defines 2 attributes width and height, and both of them are unsigned long.

With css3 also you can do it set property

resize:both;

这篇关于如何动态缩放HTML5< canvas>元件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！