javascript - HTML5 : canvas and image size

Question

我想用 JS 在 Canvas 上绘制图像。这是我的 html 代码:

<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;

但是没有用。

如何解决这个问题？

Answer 1

您应该在 Canvas 元素上设置所需的像素数量:

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