Как переключить круг на холсте?

Как переключить круг на холсте?

Я пытаюсь убедиться, что при нажатии на изображение появится круг. Тем не менее, когда я пытаюсь использовать код, подобный текущему, я не вижу изображения, сгенерированные моим кодом ниже. Я не совсем уверен, как это исправить или что делать.

Изменить: Итак, я получил изображение и холст, который будет прикреплен к каждому div. Однако каждое мое изображение, на которое вы нажимаете, активирует холст только на первом изображении. Например, если вы нажмете на изображение два и три, два холста ‘будут заполнены на изображении один. Единственный способ удалить эти холсты — дважды щелкнуть мышью по области холста. Один раз за каждый раз, когда он был применен к другим изображениям. Это происходит только в том случае, если cnvs.style.position = 'absolute'; включен. Если это закомментировано, холст соединится с нижней частью изображения, а не будет наложен.

  document.body.onload = addElement; function addElement() { var i = 0; // create a new div element const imagePath = {amp}lt;?= json_encode($face) ?{amp}gt;; // 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); } 
 {amp}lt;div class="multiple-items" id="suitei-slider"{amp}gt;{amp}lt;/div{amp}gt; 

Спасибо за любую помощь!

Это код, который я использую для справки

 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; } 
 {amp}lt;img id='theImg' src='https://blogs.worldbank.org/sites/default/files/africacan/small_better_small.jpg' onclick='draw()'{amp}gt; {amp}lt;canvas id='myCanvas' width='536px' height='536px' onclick="remove()"{amp}gt;{amp}lt;/canvas{amp}gt; {amp}lt;input type="hidden" id="sendServ"{amp}gt; 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector