Question

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

我正在创建一个画布，然后使用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：

<body width=100% style="text-align: center;" onload="draw()">
  <canvas id="WorldView" ></canvas>
</body>

为什么它会自动增加比例，如何阻止它这样做呢？另外，关于'ctx.drawImage（img，10,10）;' '10,10'推动它超过10px，更像50px。

Answer 1

你没有为canvas元素设置任何大小，所以它使用默认大小300 x 150，如果你使用CSS来设置画布大小，那么结果就是缩放。

尝试做：

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

（或填写窗口时的其他一些值不是意图）。

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

Answer 2

对于那些需要响应式画布元素的人。（做网络摄像头截图功能）。我的解决方案是首先在临时画布中打印内容，如下所示：

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

希望它可以帮助任何人！

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

2 个答案: