连接 <a> 元素以在 HTML 画布中绘制图像

Question

我正在尝试使用下拉按钮列表在 HTML 画布中显示不同的图像。我将 href 设置为利用 javascript 以及画布下方的 img 和脚本，但是当您单击按钮时什么也没有发生。我在编码中遗漏了一些东西，还是有更好的方法来解决这个问题？我很欣赏您的意见！

`<div class="dropdown">
              <button onclick="adultlist()" class="dropbtn">Adults</button>
              <div id="adults" class="dropdown-content">
                  <a href = "javascript:drawa1();">Adult 1</a> 
                  <a href = "#canvas">Adult 2</a> 
                  <a href = "#canvas">Adult 3</a> 
                  <a href = "#canvas">Adult 4</a> 
                  <a href = "#canvas">Adult 5</a> 
                  <a href = "#canvas">Adult 6</a>
                  <a href = "#canas">Adult 7</a> 
                  <a href = "#canvas">Adult 8</a> 
                  <a href = "#canvas">Adult 9</a> 
                  <a href = "#canvas">Adult 10</a>
                </div>
            </div>
            <script>
        function adultlist() {
         document.getElementById("adults").classList.toggle("show");
         }
         window.onclick = function(event) {
         if (!event.target.matches('.dropbtn')) {
         var dropdowns = document.getElementsByClassName("dropdown-content");
         var i;
         for (i = 0; i < dropdowns.length; i++) {
         var openDropdown = dropdowns[i];
         if (openDropdown.classList.contains('show')) {
         openDropdown.classList.remove('show');
               }
             }
           }
         }
              </script>

 <img id="adult1" width="100" height="290" src="SILHOUETTE PNG'S/silhouette_adult1.png"       alt="Adult 1" class="hidden">
    <canvas class="preview" id="canvas" width="250" height="300"> 
      Your browser does not support the HTML canvas tag.
    </canvas>
<script>
    function drawa1() {
          var c = document.getElementById("canvas");
          var ctx= canvas.getContext("2d");
          const img= document.getElementById("adult1").innerHTML = img;
          ctx.drawImage(img,10,10);
      };
      </script>``

Answer 1

您的代码的主要问题在于以下几行：

const img = document.getElementById("adult1").innerHTML = img;
ctx.drawImage(img, 10, 10);

首先，您将变量分配给元素的innerHTML，然后分配给其自身，这是没有意义的。您需要将

img

设置为

img

元素的引用，以便将其提供给

drawImage()

方法。

您还可以进行一些其他改进，例如从 HTML 中删除事件处理程序，并通过容器内的索引将

a

元素与图像相关联，而不必为所有内容显式分配类或 id。

这是一个包含这些更改的工作示例：

window.addEventListener('click', e => {
  if (e.target.matches('.dropbtn'))
    return;

  var dropdowns = document.querySelectorAll(".dropdown-content");
  dropdowns.forEach(dropdown => dropdown.classList.toggle('show'));
});

const dropBtn = document.querySelector('.dropbtn');
const adultsContainer = document.querySelector('#adults');
const adults = adultsContainer.querySelectorAll('a');
const images = document.querySelectorAll('.images-container img');
const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext("2d");

const getIndexWithinParent = el => [...el.parentElement.children].indexOf(el);

dropBtn.addEventListener('click', () => {
  adultsContainer.classList.toggle("show");
});

adults.forEach(adult => {
  adult.addEventListener('click', e => {
    e.preventDefault();
    ctx.fillStyle = 'rgba(0, 0, 0, 0)';
    ctx.fillRect(0, 0, canvas.width, canvas.height); // clear existing images
    
    const img = images[getIndexWithinParent(e.target)];
    ctx.drawImage(img, 10, 10);
  });
});

#adults,
.images-container {
  display: none;
}

#adults.show {
  display: block;
}

<div class="dropdown">
  <button class="dropbtn">Adults</button>
  <div id="adults" class="dropdown-content">
    <a href="#">Adult 1</a>
    <a href="#">Adult 2</a>
    <a href="#">Adult 3</a>
  </div>
</div>

<div class="images-container">
  <img width="100" height="290" src="https://dummyimage.com/100x290/ccc/fff.png&text=Adult+1" alt="Adult 1" />
  <img width="100" height="290" src="https://dummyimage.com/100x290/ccc/fff.png&text=Adult+2" alt="Adult 1" />
  <img width="100" height="290" src="https://dummyimage.com/100x290/ccc/fff.png&text=Adult+3" alt="Adult 1" />
</div>

<canvas class="preview" id="canvas" width="250" height="300"> 
  Your browser does not support the HTML canvas tag.
</canvas>