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