通过CSS和元素属性的HTML5 Canvas的大小 [英] Size of HTML5 Canvas via CSS versus element attributes

问题描述

我不明白为什么下面的代码产生不同的结果，因为css会放大画布，

 < style> 
 #canvas {
 width：800px; 
 height：600px; 
} 
< / style> 
< canvas id =canvas>< / canvas> 
  

与这种方法（工作原理）相反：

 < canvas id =canvaswidth =800pxheight =600px>< / canvas& 
  

解决方案

解释在这里： http://www.whatwg.org/specs/web-非常感谢！

$ b

$ b

画布元素的内在尺寸等于坐标空间的尺寸，数字解释为CSS像素。然而，元素可以通过样式表任意地确定大小。 在呈现过程中，图片会缩放到适合此布局尺寸。

I don't get why the following pieces of code produce different results, because css would scale the canvas as it was zoomed in,

<style>
#canvas {
    width: 800px;
    height: 600px;
}
</style>
<canvas id="canvas"></canvas>

In contrast with this approach (that works as expected):

<canvas id="canvas" width="800px" height="600px"></canvas>

解决方案

The explanation is here: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#attr-canvas-width as seen in another post, thanks!

The intrinsic dimensions of the canvas element equal the size of the coordinate space, with the numbers interpreted in CSS pixels. However, the element can be sized arbitrarily by a style sheet. During rendering, the image is scaled to fit this layout size.

这篇关于通过CSS和元素属性的HTML5 Canvas的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！