如何根據圖像上各點的座標值繪製圖像上的點

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