今天講的內容是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決定的