Получение 2 изображений холста, чтобы появиться с 1 кнопкой - PullRequest
Новая
       6

Получение 2 изображений холста, чтобы появиться с 1 кнопкой

0 голосов
/ 12 февраля 2019

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

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);
  }

Я знаю, что могу заставить его работать, изменив один id="myCanvas" в HTML и повторив текущие строки в скрипте, чтобы заставить его работать.Но на конечной веб-странице будет много холста », и я не хотел повторять код JavaScript.

Есть ли простой способ сделать то, чего я пытаюсь достичь?

1 Ответ

0 голосов
/ 12 февраля 2019

Элементы HTML не могут иметь одинаковый идентификатор.Вам нужно будет найти своих elemnts другим способом.Есть много способов;getElementsByTagName, getElementsByClassName, querySelectorAll, ... и т. Д.

Использовать querySelectorAll(".content > canvas"); Это выберет все прямые дочерние элементы, которые являются элементами холста в элементе, который имеет класс«содержимого» (в данном случае это элемент вашего раздела). 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...