如何在 canvas 上切換一個圓圈？

Question

我試圖確保當單擊圖像時，圖像上會出現一個圓圈。 但是，當我嘗試當前的代碼時，我無法看到下面我的代碼生成的圖像。 我不完全確定如何修復它或做什么。

編輯：所以我得到了要附加到每個 div 的圖像和 canvas。 但是，您單擊的每張圖片都會僅在第一張圖片上激活 canvas。 例如，如果您單擊圖像二和三，兩個畫布將填充在圖像一上。 刪除這些畫布的唯一方法是單擊 canvas 區域兩次。 每次將其應用於其他圖像時一次。 這只發生在cnvs.style.position = 'absolute'; 已啟用。 如果將其注釋掉，則 canvas 將自身連接到圖像底部而不是被覆蓋。

 document.body.onload = addElement; function addElement() { var i = 0; // create a new div element const imagePath = <?= json_encode($face)?>; // console.log(imagePath); for (const image of imagePath) { var id = `${image}`; const img = document.createElement("img"); img.src = `/check/assets/img/${image}`; img.classList.add("new"); const cnvs = document.createElement("canvas"); cnvs.classList.add("suiteiCanvas"); cnvs.style.left = img.offsetLeft + "px"; cnvs.style.top = img.offsetTop + "px"; var ctx = cnvs.getContext("2d"); ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); ctx.arc(100, 75, 50, 0, 2 * Math.PI, false); ctx.lineWidth = 15; ctx.strokeStyle = '#FF0000'; ctx.stroke(); var div = document.createElement("div"); div.id = id; div.classList.add("image"); linebreak = document.createElement("br"); document.getElementById('suitei-slider').appendChild(div); document.getElementById(image).appendChild(img); document.getElementById(image).appendChild(cnvs); cnvs.onclick = function() { cnvs.style.display = 'none'; hdnName.value = null; }; img.onclick = function() { cnvs.style.display = ''; hdnName.value = img.id; }; } }

 canvas.suiteiCanvas{ height: auto; width: auto; /* position: absolute; display: 'none'; */ max-height: 200px; max-width: 150px; margin-left: 100px; margin-right: 100px; border:3px solid rgb(20, 11, 11); } img.new { height: auto; width: auto; max-height: 200px; max-width: 150px; margin-left: 100px; margin-right: 100px; border:3px solid rgb(20, 11, 11); }

 <div class="multiple-items" id="suitei-slider"></div>

謝謝你的幫助！

這是我用來參考的代碼

 var img = document.getElementById("theImg"); var cnvs = document.getElementById("myCanvas"); var hdnName = document.getElementById("sendServ"); cnvs.style.position = "absolute"; cnvs.style.left = img.offsetLeft + "px"; cnvs.style.top = img.offsetTop + "px"; cnvs.style.display = 'none'; var ctx = cnvs.getContext("2d"); ctx.beginPath(); ctx.arc(100, 75, 50, 0, 2 * Math.PI, false); ctx.lineWidth = 15; ctx.strokeStyle = '#FF0000'; ctx.stroke(); function draw(){ cnvs.style.display = ''; hdnName.value = img.id; } function remove() { cnvs.style.display = 'none'; hdnName.value = null; }

 #draw-btn { font-size: 14px; padding: 2px 16px 3px 16px; margin-bottom: 8px; }

 <img id='theImg' src='https://blogs.worldbank.org/sites/default/files/africacan/small_better_small.jpg' onclick='draw()'> <canvas id='myCanvas' width='536px' height='536px' onclick="remove()"></canvas> <input type="hidden" id="sendServ">

Answer 1

你試着

document.getElementById(image).apppendChild(cnvs);

並且，假設 image 是img標簽的id ，這實際上意味着您嘗試將 append 和canvas作為img的子級，這是無效的。 如果您查看用作 model 的代碼，您會發現它沒有將canvas標記附加為img標記的子標記，而是在canvas中顯示圖像因此，問題在於您在結構上嘗試將canvas放在img中，而不是像 model 代碼那樣將img繪制在canvas中。