如何在画布上加载图像并在单击上放置标记

Zrik好的，我为您创建了一个jsFiddle，它应该为您提供一个不错的开始：）。

jsFiddle：https
://jsfiddle.net/7hed6uxL/2/

HTML

<p>Click on the map to place a marker</p><canvas id="Canvas" width="700" height="700"></canvas>

Java脚本

// Target the canvas element on the pagevar canvas = document.getElementById('Canvas');var context = canvas.getContext("2d");// Map spritevar mapSprite = new Image();mapSprite.src = "http://www.retrogameguide.com/images/screenshots/snes-legend-of-zelda-link-to-the-past-8.jpg";// Create a basic class which will be used to create a markervar Marker = function () {    this.Sprite = new Image();    this.Sprite.src = "http://www.clker.com/cliparts/w/O/e/P/x/i/map-marker-hi.png"    this.Width = 12;    this.Height = 20;    this.XPos = 0;    this.YPos = 0;}// Array of markersvar Markers = new Array();// When the user clicks their mouse on our canvas run this prevar mouseClicked = function (mouse) {    // Get corrent mouse coords    var rect = canvas.getBoundingClientRect();    var mouseXPos = (mouse.x - rect.left);    var mouseYPos = (mouse.y - rect.top);    // Move the marker when placed to a better location    var marker = new Marker();    marker.XPos = mouseXPos - (marker.Width / 2);    marker.YPos = mouseYPos - marker.Height;    // Push our new marker to our Markers array    Markers.push(marker);}// Add mouse click event listener to canvascanvas.addEventListener("mousedown", mouseClicked, false);// Run this once so we setup text renderingvar firstLoad = function () {    context.font = "15px Georgia";    context.textAlign = "center";}firstLoad();// This will be called 60 times a second, look at the pre at the bottom `setInterval`var main = function () {    // Update our canvas    draw();};var draw = function () {    // Clear Canvas    context.fillStyle = "#000";    context.fillRect(0, 0, canvas.width, canvas.height);    // Draw map    // Sprite, X location, Y location, Image width, Image height    // You can leave the image height and width off, if you do it will draw the image at default size    context.drawImage(mapSprite, 0, 0, 700, 700);    // Draw markers    for (var i = 0; i < Markers.length; i++) {        var tempMarker = Markers[i];        // Draw marker        context.drawImage(tempMarker.Sprite, tempMarker.XPos, tempMarker.YPos, tempMarker.Width, tempMarker.Height);        // Calculate position text        var markerText = "Postion (X:" + tempMarker.XPos + ", Y:" + tempMarker.YPos;        // Draw a simple box so you can see the position        var textMeasurements = context.measureText(markerText);        context.fillStyle = "#666";        context.globalAlpha = 0.7;        context.fillRect(tempMarker.XPos - (textMeasurements.width / 2), tempMarker.YPos - 15, textMeasurements.width, 20);        context.globalAlpha = 1;        // Draw position above        context.fillStyle = "#000";        context.fillText(markerText, tempMarker.XPos, tempMarker.YPos);    }};setInterval(main, (1000 / 60)); // Refresh 60 times a second

我已经注释了代码，因此它应该向您解释所有内容，如果您需要更多帮助，请告诉我。另外，只是为了让您知道不

context.fillRect(tempMarker.XPos- (textMeasurements.width / 2), tempMarker.YPos - 15, textMeasurements.width,20);

20