canvas 的HTML屬性

（一） width/height 默認值與單位　　

　　Canvas  標籤只有兩個屬性—— width\height,做爲一種替換元素，它默認大小爲300×150像素。

　　canvas的單位只能是是px，值只能是整數。若是你設置爲其餘單位或者不設置，在渲染時，依舊按照像素單位顯示。

　　若是數值設置稱負數，或者 不設置，則按照 300×150像素顯示（前提是 沒有設置css，不然會有一些神奇的現象出現）。

　　

（二）屬性與CSS權重問題

 <canvas style="background-color: #039be5; width: 300px" width="100px" ></canvas>

　　請試想下，這個canvas表現出 的寬度，高度是多少？

　　寬度是300px,所以，css的權重是  >   HTML 屬性權重。

　　渲染出的高度卻不是默認150px，以下圖所示：

　

　　渲染出的高度是450px,這是爲何呢？

　　MDN上有句話： 繪製時圖像會伸縮以適應它的框架尺寸 。

　　也就是說：  這裏會按照等比例縮放：  即 （300【css寬度】/100【width寬度】）*150（height默認高度） = 450 px （渲染高度） 。　　  

　　canvas的等比特性是強制的，有時候就會形成繪製的圖形會發生扭曲。

　　以下，我即設置樣式中的 width與height，又單獨設置了 HTML屬性中的width，可是 300/100=3，而300/150=2，

　　所裏二者比例不一致，我繪製的圓，便會出現扭曲。 所以，實際開發中，不要二者都設置。

 <canvas style="background-color: #039be5; width: 300px; height: 300px;" width="100px" ></canvas>

 let context=document.querySelector('canvas').getContext('2d');
   context.fillStyle='red';
   context.arc(60,65,35,0,2*Math.PI);
   context.fill();

　　（三） Css 中width/height 與 HTML屬性 widht/height 關係

　             試想下，當咱們在css中設置了屬性，並未設置 HTML屬性時， 繪製圖像時，它的座標位置，尺寸大小是相對 咱們在css中設置的寬度與高度嗎？

 <canvas style="background-color: #039be5; height: 300px;" ></canvas>
<script type="text/javascript"> let context=document.querySelector('canvas').getContext('2d'); context.fillStyle='red'; context.arc(150,75,75,0,2*Math.PI); context.fill(); </script>

　如上，咱們設置一個高度爲300px（寬度渲染爲600px)的畫布，而後在距離左頂點 150px,75px（也是圓心所在標記） 處繪製了一個圓，這個圓會居中嗎？　

　 若是按照真實的高度300px來計算，距離上邊距75px顯然是不可能居中的；合理的解釋是，是按照默認的HTML height屬性150px來進行了定位。

　　

　　若是隻設置HTML屬性，一樣的JS繪製，效果圖以下。

 <canvas style="background-color: #039be5; " height="300px" width="600px"></canvas>

   所以，使用Canvas API進行圖像繪製時，其座標位置，尺寸大小都是按照 HTML屬性來進行定位的。