iT邦幫忙

1

如何remove canvas 上的tag

  • 分享至 

  • xImage

我不能在 "var markerText = "Postion (X:" + tempMarker.XPos + ", Y:" + tempMarker.YPos;" 加上ID ,如果我想刪除其中一舍tag ,應該怎樣做?

HTML

 <p>Try</p>
    <canvas id="Canvas" width="700" height="700"></canvas>
    <script src="point.js"></script>

JS

var canvas = document.getElementById('Canvas');
var context = canvas.getContext("2d");

// Map sprite
var mapSprite = new Image();
mapSprite.src = "tee.png";

var Marker = function () {
    this.Sprite = new Image();
    this.Sprite.src = "point.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
如果是已經繪入的。你只能重繪處理。
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

1
淺水員
iT邦大師 6 級 ‧ 2022-05-24 16:31:13

如果是最後一個,再繪製

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);
    }
    // 改成只畫最後一個元素的文字座標
    if(Markers.length > 0) {
        // last element of Markers
        var tempMarker = Markers[Markers.length-1];
        // 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 重繪是因為不知道怎麼處理圖片載入非同步的問題

淺水員 iT邦大師 6 級 ‧ 2022-05-24 17:30:01 檢舉

這個範例透過 image onload 事件(搭配 Promise 實作)
保證圖片載入後才開始與使用者互動
這樣就能避免不斷用 setInterval 重繪

另外 Canvas.ImageData 可以記錄目前 canvas 畫面
所以我沒有用 Marker Array 紀錄
(因為我不知道你需求,如果還需要刪除先前的點,那可能還是要回到陣列紀錄每次的操作)

var canvas = document.getElementById('Canvas');
var context = canvas.getContext("2d");
var imageData = null; //紀錄 canvas 畫面用(不含文字框)
var mapSprite = null; //儲存載入的圖片
var markerSprite = null; //儲存載入的圖片

var Marker = function () {
    this.Sprite = markerSprite;
    this.Width = 12;
    this.Height = 20;
    this.XPos = 0;
    this.YPos = 0;
}

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;

    draw(marker);
}

var initCanvas = function () {
    context.font = "15px Georgia";
    context.textAlign = "center";
    // 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);

    //儲存畫面到 imageData
    imageData = context.getImageData(0, 0, canvas.width, canvas.height);
}

var draw = function (markerObject) {
    //把先前的畫面貼到 canvas
    context.putImageData(imageData, 0, 0);
    // Draw markers
    context.drawImage(markerObject.Sprite, markerObject.XPos, markerObject.YPos, markerObject.Width, markerObject.Height);
    //儲存畫面到 imageData,此時沒有文字
    imageData = context.getImageData(0, 0, canvas.width, canvas.height);
    // Calculate postion text
    var markerText = "Postion (X:" + markerObject.XPos + ", Y:" + markerObject.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(markerObject.XPos - (textMeasurements.width / 2), markerObject.YPos - 15, textMeasurements.width, 20);
    context.globalAlpha = 1;

    // Draw position above
    context.fillStyle = "#000";
    context.fillText(markerText, markerObject.XPos, markerObject.YPos);
};

var loadImage = function (url) {
    return new Promise(function (resolve, reject) {
        var image = new Image();
        image.onload = function (evt) {
            resolve(evt.target);
        }
        image.onerror = reject;
        image.src = url;
    });
}

Promise.all([
    loadImage("tee.png"),
    loadImage("point.png"),
]).then(function (imageArr) {
    //讀取完圖片後,設定到 mapSprite, markerSprite
    mapSprite = imageArr[0];
    markerSprite = imageArr[1];
    //初始化 canvas
    initCanvas();
    //準備完成才添加事件,允許使用者操作
    canvas.addEventListener("mousedown", mouseClicked, false);
}).catch(function () {
    alert("發生錯誤");
});

我要發表回答

立即登入回答