0

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

我正在创建一个画布，然后使用 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' 将其推得超过 10 像素，更像是 50 像素。

4

2 回答 2

0

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

尝试做：

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

（或其他一些值，如果填充窗口不是意图）。

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

于 2013-11-13T23:44:05.377 回答
-1

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

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

希望它可以帮助任何人！

于 2017-05-16T08:49:38.310 回答