如何根据图像上各点的坐标值绘制图像上的点

Question

我有图像，我有图像上各点的坐标值。 现在，当图像在网页上呈现时，我必须展示一个大点或任何用户可以在Google地图上看到的标记点。

示例 - 将谷歌地图作为我的图像（但不会是地图，它将成为家庭的天花板图像）和地图上的标记作为点。 我必须在我的图像上显示标记类别的东西。

这是如何使用jQuery，JavaScript，CSS等来实现的。

任何帮助appreciated..Thanks :)

Answer 1

我得到了答案.. :)
退房the fiddle here

HTML

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

的Javascript

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"; 

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; 
} 

var Markers = new Array(); 

var mouseClicked = function (mouse) { 
    // Get corrent mouse coords 
    var rect = canvas.getBoundingClientRect(); 
    var mouseXPos = (mouse.x - rect.left); 
    var mouseYPos = (mouse.y - rect.top); 

    console.log("Marker added"); 

    // Move the marker when placed to a better location 
    var marker = new Marker(); 
    marker.XPos = mouseXPos - (marker.Width/2); 
    marker.YPos = mouseYPos - marker.Height; 

    Markers.push(marker); 
} 

// Add mouse click event listener to canvas 
canvas.addEventListener("mousedown", mouseClicked, false); 

var firstLoad = function() { 
    context.font = "15px Georgia"; 
    context.textAlign = "center"; 
} 

firstLoad(); 

var main = function() { 
    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 postion 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