Question

我决定首先加载图像，然后将它绘制到画布上。

我想添加一个按钮以允许图像移动。为此，我需要图像的ID。图像是否有ID或者我可以为图像指定ID吗？

我希望能够通过循环更改图像的ID。例如，画布某个区域的所有内容都变为pit1marble1，pit1marble2。

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
  <div>
    <canvas id="myCanvas" width="1024" height="479" usemap="Canvas"></canvas>
    <script>
      function loadImages(sources, callback) {
        var images = {};
        var loadedImages = 0;
        var numImages = 0;
        // get num of sources
        for(var src in sources) {
          numImages++;
        }
        for(var src in sources) {
          images[src] = new Image();
          images[src].onload = function() {
            if(++loadedImages >= numImages) {
              callback(images);
            }
          };
          images[src].src = sources[src];
        }
      }
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      var sources = {
        background: 'MANCALA-game_bg_combined3.png',


      };

      loadImages(sources, function(images) {
        context.drawImage(images.background, 0, 0, 1024, 479);
      });

    </script>
  </body>
</html>

如何将动态id添加到画布

0 个答案: