如何防止javascript drawImage（）缩放图像？

我的目标很简单：在背景图像（特别是地图）上绘制图标

我正在创建一个画布，然后使用JavaScript在上面绘制图标。不幸的是，当我加载图标时，它会大幅增加比例。这是我的密码：

function draw(){
  var canvas = document.getElementById("WorldView");
  if(!canvas.getContext){return;}
  var ctx = canvas.getContext("2d");
  var img = new Image();
  img.onload = function(){ctx.drawImage(img,10,10);};
  img.src = 'images/ship-icon small.png';
}

HTML:

---

为什么它会自动增加比例？我如何防止它这样做？另外，在“ctx.drawImage（img，10,10）；”“10,10”将其推进到10px以上，更像是50px。

您还没有为画布元素设置任何大小，因此，使用默认大小300 x 150的画布元素，如果您使用CSS设置画布大小，其内容的缩放将是结果

试着做：

var canvas = document.getElementById("WorldView");
canvas.width = window.innerWidth;   /// integer values
canvas.height = window.innerHeight;

（如果不打算填充窗口，则使用其他值）

---

然后从CSS中删除大小设置。

适用于需要响应画布元素的用户。（正在执行网络摄像头屏幕截图功能）。 我的解决方案是首先在临时画布中打印内容，如下所示：

originImageCanvas = document.createElement('canvas')
originImageCanvas.width = $(_video).outerWidth()
originImageCanvas.height = $(_video).outerHeight()
originImageCtx = originImageCanvas.getContext('2d')
originImageCtx.drawImage _video, 0, 0, originImageCanvas.width, originImageCanvas.height

hiddenCanvas = document.createElement('canvas')
hiddenCanvas.width = $(_video).outerWidth()
hiddenCanvas.height = $(_video).outerHeight()
ctx = hiddenCanvas.getContext('2d')

unless sourceX?
  sourceX = (hiddenCanvas.width / 2) - (sourceWidth / 2)

unless sourceY?
  sourceY = (hiddenCanvas.height / 2) - (sourceHeight / 2)

ctx.drawImage originImageCanvas, sourceX, sourceY, sourceWidth, sourceHeight, 0, 0, sourceWidth, sourceHeight

---

希望它能帮助任何人

这可能是因为您在img.onload之后设置了源。@mulquin在onload之后设置src是正确的方法我也应该包括我的CSS:#WorldView{文本对齐：居中；左边距：自动；右边距：自动；背景图像：url（../WorldView/world.png）；宽度：1670px；高度：852px；背景重复：无重复；背景位置：中间顶部；填充：0px；边距：0px；}这就是问题所在。我只是用CSS设置了画布的大小。在DOM中设置它解决了这个问题。非常感谢@Gn13l没问题。：）

originImageCanvas = document.createElement('canvas')
originImageCanvas.width = $(_video).outerWidth()
originImageCanvas.height = $(_video).outerHeight()
originImageCtx = originImageCanvas.getContext('2d')
originImageCtx.drawImage _video, 0, 0, originImageCanvas.width, originImageCanvas.height

hiddenCanvas = document.createElement('canvas')
hiddenCanvas.width = $(_video).outerWidth()
hiddenCanvas.height = $(_video).outerHeight()
ctx = hiddenCanvas.getContext('2d')

unless sourceX?
  sourceX = (hiddenCanvas.width / 2) - (sourceWidth / 2)

unless sourceY?
  sourceY = (hiddenCanvas.height / 2) - (sourceHeight / 2)

ctx.drawImage originImageCanvas, sourceX, sourceY, sourceWidth, sourceHeight, 0, 0, sourceWidth, sourceHeight