HTML5：畫布和圖像大小

我想在使用JS的畫布上繪製圖像。這是我的html代碼：HTML5：畫布和圖像大小

<canvas style="width:1000px;height:600px;border:1px solid black;" id="canvas"> </canvas>

這是我的js代碼：

var canvas = document.getElementById('canvas'); 
    var ctx = canvas.getContext('2d'); 
    var img = new Image(); 
    img.onload = function(){ 
     ctx.drawImage(img, 0, 0,1000,600) 
    } 
    img.src = someUrlToJpgImage;

這是位於服務器上的原點JPG圖片（爲1000x600）：

這是我在瀏覽器中看到的結果（1000x600）：

正如你所看到的這是縮放圖像的左上角，但不是預期的整個圖像。我試圖添加到js代碼：

ctx.imageSmoothingEnabled = false; 
ctx.webkitImageSmoothingEnabled = false; 
ctx.mozImageSmoothingEnabled = false;

但它沒有幫助。

如何解決這個問題？

來源

2017-02-03 Pavel_K

，則應該設置所需的畫布元件上的像素的量：實際上需要在`width` /`height`屬性，固定我的例子沒有單元

<canvas style="width:1000px;height:600px;border:1px solid black;" height="600" width="1000" id="canvas"> </canvas>

來源

2017-02-03 17:28:57 Schlaus

。 – Schlaus

HTML5：畫布和圖像大小

回答

相關問題