Question

我正在尝试通过按1个按钮来显示多个画布图像。我可以使一张图像完美地工作，但是第二张却不能。 我知道ID必须是唯一的，并且只有第一个画布当前具有图像。

HTML

<!DOCTYPE html>
<html>
    <head>
        <script src="script.js"></script>
    </head>
    <body>
        <div class="bg">
            <img src="Assets/Images/background.png" alt="background">   
        </div>
        <section class="content">

            <img id="taxi" src="Assets/Images/PV.png" width="106" height="53">
            <canvas id="myCanvas" width="106" height="53"
            style="border:1px solid #d3d3d3; position:absolute; left:510px;top:117px;">
            Your browser does not support the HTML5 canvas tag.</canvas>
            <canvas id="myCanvas" width="106" height="53"
            style="border:1px solid #d3d3d3; position:absolute; left:310px;top:117px;">
            Your browser does not support the HTML5 canvas tag.</canvas>

            <p><button onclick="myCanvas()">Try it</button></p>
        </section>

    </body>
</html>

JS

function myCanvas() {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var img = document.getElementById("taxi");
    ctx.drawImage(img,0,0,106,53);
  }

我知道我可以通过更改HTML中的id="myCanvas"并重复脚本中的当前行来使其工作来使其工作。但是最终网页上会有很多画布，而且我不想继续重复JavaScript代码。

有没有一种简单的方法可以实现我想要实现的目标？

Answer 1

HTML元素不能具有相同的ID。您将需要以其他方式检索您的元素。有很多方法。 getElementsByTagName，getElementsByClassName，querySelectorAll等...

使用querySelectorAll(".content > canvas");，这将在具有“内容”类（在本例中为您的section元素）的元素中选择所有属于画布元素的 direct 子元素。

function myCanvas() {
    document.querySelectorAll(".content > canvas").forEach(c=>{
      var ctx = c.getContext("2d");
      var img = document.getElementById("taxi");
      ctx.drawImage(img,0,0,106,53);
    });
}

基本示例：

function myCanvas() {
    document.querySelectorAll(".content > canvas").forEach(c=>{
      var ctx = c.getContext("2d");
      var img = document.getElementById("taxi");
      ctx.drawImage(img,0,0,106,53);
    });
}

<section class="content">

  <img id="taxi" src="https://static-s.aa-cdn.net/img/ios/899287106/45820b5b6bba46c7fcd853a46d554a34?v=1" width="106" height="53">
  <canvas width="106" height="53" style="border:1px solid #d3d3d3; position:absolute; left:510px;top:117px;">
            Your browser does not support the HTML5 canvas tag.</canvas>
  <canvas width="106" height="53" style="border:1px solid #d3d3d3; position:absolute; left:310px;top:117px;">
            Your browser does not support the HTML5 canvas tag.</canvas>

  <p><button onclick="myCanvas()">Try it</button></p>
</section>

用1个按钮显示2个画布图像

1 个答案: