Question

我有以下代码将图片加载到我的画布中：

<html>
<body>
<canvas id="myCanvas" width="900" height="900"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  var imageObj = new Image();

  imageObj.onload = function() {
    context.drawImage(imageObj, 0, 0);

  };
  imageObj.src = 'Map.png';

  var canvas = document.getElementById("myCanvas");
  var canvasWidth = canvas.width;
  var canvasHeight = canvas.height;
  var ctx = canvas.getContext("2d");
  var canvasData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);  
</script>

我知道如何绘制点，但我想知道如何在图像上的x，y上绘制我的标记（示例绿色图标），我该怎么做？

我的标记有图像，我只想在图像地图上绘制图像标记。

感谢。

Answer 1

您必须为标记执行与地图相同的操作：

...
var markerObj = new Image();

markerObj.onload = function() {
    context.drawImage(markerObj, x, y);
};
markerObj.src = 'marker.png';
...

JSBin

在画布图像上绘制图标

1 个答案: