canvas.drawImage（）在指定位置和尺寸時使用什麼單位？

Question

我有一個寬度和高度百分比的畫布，我在那裏繪製圖像。

我想繪製50％寬度和100％畫布高度的圖像。我該如何做到這一點？

下面是一些代碼：

#canvas { 
    width: 100%; 
    height: 33%; 
} 

var cv = document.getElementById('canvas'); 
var cx = cv.getContext('2d'); 

var bg = document.createElement('img'); 
bg.src = bg_url; 

cx.drawImage(bg, ?, ?, ?, ?); 
// cx.drawImage(bg, 0, 0, 50%, 100%); essentially 

// now let's draw that second image at 50% of the canvas (tiling) 

cx.drawImage(bg, ?, ?, ?, ?); 
// cx.drawImage(bg, 50%, 0, 50%, 100%); essentially 

Answer 1

什麼單位指定位置和尺寸何時canvas.drawImage（）使用？

它在所有尺寸上都使用CSS pixels。

此：

#canvas { 
    width: 100%; 
    height: 33%; 
} 

只會縮放畫布圖像。畫布像素尺寸將保持不變，導致質量較差。作爲規則總是在畫布元素上設置絕對大小（如果你不這樣做，無論你使用CSS設置什麼大小都不會超過300 x 150像素）。

var canvas = document.getElementById('canvasID'); 

canvas.width = window.innerWidth;  // use the target size instead if 
canvas.height = window.innerHeight * 33; // not the window 

然後：

cx.drawImage(bg, 0, 0, canvas.width * 0.5, canvas.height);