canvas 宽高问题

引子

在最近的工做中碰到了合成图片的需求，首先想到的即是 canvas，到网上查找了一些资料，大部分也是使用 canvas。由于很久没有实际接触过这方面的东西了，感受到一些兴奋。预估会收获很多。

• Origin
• My GitHub

宽高问题

由于是在手机上，须要进行不一样尺寸的适配，在项目中使用的是 rem 单位，想着既然拥有全局属性 width 和 height，那么理论上应该支持。进行了下面的尝试。

html 标签属性设置

这是示例，扫描二维码访问以下。

发现这个想法不对，后来看规范中的描述，发现描述的已经很清楚了：

The canvas element has two attributes to control the size of the element's bitmap: width and height. These attributes, when specified, must have values that are valid non-negative integers. The rules for parsing non-negative integers must be used to obtain their numeric values. If an attribute is missing, or if parsing its value returns an error, then the default value must be used instead. The width attribute defaults to 300, and the height attribute defaults to 150.

canvas 元素有2个控制元素位图的属性：width 和 height。这些属性，当指定的时候，必需要是非负整数值。必定要使用解析非负整数的规则，来获取它们的数字值。若是一个属性值没有，或者解析的时候返回了一个错误，那么必定要使用默认的值。width 属性的默认值是 300，height 属性的默认值是 150。

仔细看看而后结合实践就会发现：html 标签上 width 和 height 的属性值带单位不会有做用。

css 属性设置

除了直接设置元素属性，还能够经过 css 来控制 canvas 的宽高。这是示例，扫描二维码访问以下。

实践后发现是能够的。此外，从示例中还能够发现现象：

1. 在 canvas 标签上没有设置 width 和 height 属性，用 css 只设置了 width 和 height 其中一种属性，那么另一种属性的值，会根据默认宽高比例：300:150 = 2:1 进行转换获得。
2. 在 canvas 标签上有设置 width 和 height 属性，用 css 只设置了 width 和 height 其中一种属性，那么另一种属性的值，会根据 canvas 标签上 width 和 height 值的比例进行转换获得。

这种方式可让总体的显示，达到自适应的效果。

动态计算

根据宽高比例用 js 动态计算后进行赋值，也能够到达一种显示自适应的效果。

以上的方式只是总体的显示，在实际应用中会有其它的问题，在 canvas 显示模糊问题中有更加详的细解释。

参考资料

• The canvas element