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

Question

您好，我正在开发最后一年的项目应用程序，但是我对HTML5的使用经验不足。

我正在尝试创建一个简单的画布，用于在开始时加载图像，并且在加载图像时，我希望能够在图像上放置标记，例如google
maps如何放置标记…。最有可能是图像，但我需要计算X和Y位置并显示放置在原始加载的图像上的每个标记的坐标.....

标记可以以数组形式存储在javascript中，也可以以ajax形式存储，因为可以对其进行更新并且地图需要刷新

在此先感谢您提供的任何帮助。非常感激

Answer 1

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 page
var canvas = document.getElementById('Canvas');
var context = canvas.getContext("2d");

// Map sprite
var 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 marker
var 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 markers
var Markers = new Array();

// When the user clicks their mouse on our canvas run this code
var 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 canvas
canvas.addEventListener("mousedown", mouseClicked, false);

// Run this once so we setup text rendering
var firstLoad = function () {
    context.font = "15px Georgia";
    context.textAlign = "center";
}

firstLoad();

// This will be called 60 times a second, look at the code 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在此行上使用硬编码数字，您可能应该将值存储在变量中，因为这将始终是文本背景框的高度。但是我把它放在那里，让您了解对您有用的东西。