canvas 宽高问题

Posted 2020-12-12 thyshare

引子

在最近的工作中碰到了合成图片的需求，首先想到的便是 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