在画布图像中单击按钮后更改标记 svg

Question

我有一个画布图像，并在其中添加了一个标记。标记是 svg 类型。然后，当我单击按钮时，我想将 svg 更改为另一个 svg。我该怎么做？

它有效。现在我想单击输入并在函数changesvg()中说，在同一位置用新的svg替换旧的svg。有任何想法吗？谢谢。

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

<input id="clickMe" type="button" value="clickme" onclick="changesvg();" />

<canvas id="Canvas" width="700" height="700"></canvas>

Answer 1

const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

    // Draw image on canvas
    function drawImage() {
        let img = new Image();
        img.onload = function () { ctx.drawImage(img, 0, 0, canvas.width,canvas.height);
        };
        img.src = 'path_image.jpg';
    }

    // Function to change the marker SVG
    function changeCanvas() {
        // update your marker SVG
        shape
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = 'red';
        ctx.beginPath();
        ctx.arc(canvas.width / 2, canvas.height / 2, 50, 0, Math.PI * 2);
        ctx.fill();
    }

    // Add event listener on button click
    document.getElementById('Btn').addEventListener('click', changeCanvas);

    // Initial draw
    drawImage();