canvas.width和canvas.style.width區別以及應用

今天講的內容是canvas.width和canvas.style.width的區別，在沒有作canvas項目以前，其實我是並無深刻了解過這兩個屬性的，最近在研究canvas項目的自適應問題，尤爲是在canvas中置入圖片，碰到了圖片模糊的問題，這些「雜症」都是和文章要講的canvas.width/canvas.style.width有關係。

canvas.width/canvas.style.width概覽

先看一下這個例子：https://codepen.io/parkeeers/...

<canvas id="diagonal1" style="border:1px solid;" width="100px" height="100px">
</canvas>
<canvas id="diagonal2" style="border:1px solid;width:200px;height:200px;"
width="100px" height="100px">
</canvas>
<canvas id="diagonal3" style="border:1px solid;width:200px;height:200px;">
</canvas>
<canvas id="diagonal4" style="border:1px solid">
</canvas>

// JavaScript
function drawDiagonal(id) {
  var canvas = document.getElementById(id);
  var context = canvas.getContext("2d");
  context.beginPath();
  context.moveTo(0, 0);
  context.lineTo(100, 100);
  context.stroke();
}

window.onload = function() {
  drawDiagonal("diagonal1");
  drawDiagonal("diagonal2");
  drawDiagonal("diagonal3");
  drawDiagonal("diagonal4");
}

效果圖

• 咱們來看第一個canvas，指定了canvas的大小，並未指定canvas.style的大小，那麼畫布就是實實在在是100*100大小，咱們JS代碼中，也是在畫一條從（0，0）到（100， 100）的對角線。第一個徹底沒有問題
• 第二個canvas，canvas自己以及canvas.style都進行了定義，從定義能夠看到canvas.style就是在將咱們的畫布放大2倍，從圖也能看到，這條線指向對角沒問題，可是變粗了，這也證實了，canvas先是參考本身的自己畫布大小進行繪製，繪製完畢，由style指定的大小，渲染在瀏覽器頁面

• 第三個canvas，自己的canvas與canvas.style不成比例，html中並無顯示的聲明canvas自己的大小，只聲明瞭style的大小，那麼這種狀況下，canvas畫布自己的大小就是默認值300*150；那麼咱們依託300*150進行繪製，就像第四個純淨的canvas上的線條同樣繪製，繪製完畢後，要渲染到頁面，這個時候，仍是和canvas2那個套路同樣，依據style指定的width，height進行縮放，狀態就由第四個canvas變成了第三個最後的樣子。咱們來看一下公式：
  默認大小300*150，style指定大小200*200

  
  

  最後標準位置下的（100，100）就變成了在style下200*200的（66.7， 133.333）

• 最後一幅圖就是當不指定canvas大小時，默認的大小，標準的300*150

總結：舉了三個不一樣可是互相關聯的例子，經過這些，咱們能瞭解，canvas自己是一個畫布，咱們怎麼理解畫布，決定了咱們是否能正確的理解canvas.width和canvas.style.width的區別。canvas.width就是畫布真實的大小，這個畫布不是咱們能看到的畫布，咱們能看見的畫布，已是在瀏覽器處理canvas.style.width/canvas.style.height以後，加工處理後的畫布。而cavnas.style.width/canvas.style.height決定了畫布以怎樣的形式進行縮放展現給頁面。轉換的比例就是上面兩個公式。最後，當咱們不指定canvas的真實大小時，默認按照300*150處理。

• canvas.width / canvas.height 表示畫布真實大小，其實咱們並不可見
• canvas.style.width / canvas.style.height 表示畫布輸出到瀏覽器咱們可見的/最終的大小
• 不提供canvas真實大小時，默認按300*150處理，若是canvas.style也沒提供，那麼style.width爲空，注意並非300*150

canvas圖片模糊的問題（待完善）

再講canvas圖片模糊的問題以前，咱們能夠看一下上面第二個canvas，真實大小與樣式指定的大小是呈2倍關係，最後咱們的線條也是放大2倍，你們要注意一個概念，canvas繪製是以本身真實大小來定位&繪製的，最後由瀏覽器渲染到頁面可見時，由canvas.style.width/cavnas.style.height決定的