Javascript HTML5：画布和图像大小

我想用JS在画布上画一幅图像。 这是我的html代码：

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

这是位于服务器上的原始jpg映像（1000x600）：

这是我在浏览器中看到的结果（1000x600）：

如您所见，这是缩放图像的左上角，而不是预期的整个图像。我试图添加到js代码中：

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

但这没用

---

如何解决这个问题

您应该设置画布元素上所需的像素量：

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

---

您应该设置画布元素上所需的像素量：

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

实际上在

宽度

/

高度

属性中不需要单位，修复了我的示例。实际上在

宽度

/

高度

属性中不需要单位，修复了我的示例。