在“动态”画布上绘图

Question

所以我有一个循环，可以根据 jquery 的某些参数创建画布。 代码如下：

var Game = {
    cards: [],
    $board: $('[data-display="game-board"]'),

    deal: function() {
     var self = this;
     var dealRequest = $.ajax({
        url: 'set.php?action=deal',
        type: 'GET',
        dataType: 'json',
        success: function(data) {
            self.cards = data;
            self.displayCards.call(self);
            self.existingSet(data);
            self.setCardListeners();
            self.setPageListeners();
        }
     });
   },

    displayCards: function() {
     var self = this;
     $.each(this.cards, function(index, card) {
       var cardNode = $('<div>');
       cardNode.addClass('card');
       $(cardNode).data({
         'id': card.id,
         'shape': card.shape,
         'fill': card.fill,
         'color': card.color,
         'number': card.number
       });
     
   var shapeNode = $("<canvas></canvas>");
   shapeNode.addClass('shape ' + card.color + ' ' + card.shape + ' ' + card.fill);

   for (var i = 0; i < card.number; i++) {
     cardNode.append(shapeNode.clone());
   }
   self.$board.append(cardNode);
    
   // display 4 cards per row
   if ((index+1) % 3 === 0) {
    self.$board.append($('<div>'));
   }
};

然后我尝试从我的 HTML 中恢复这些使用 css 类的名称创建的画布，例如：

var canvases = document.getElementsByClassName('shape diamond red solid');

但是当我尝试在这些画布中绘制时，没有显示任何内容。我会这样做：

var canvases = document.getElementsByClassName('shape red diamond solid');
for (let canvas of canvases) {
    var context = canvas.getContext('2d');
    drawDiamond(context, 50, 50, 75, 100);
    canvas.fillStyle("#FF0000");
    ctx.fillRect(0, 0, canvas.width, canvas.height);
}

但是当我静态地创建一个画布时。

您能帮我找出问题或解决方案吗？谢谢！

Answer 1

建议以下代码：

$.each(this.cards, function(index, card) {
  var cardNode = $('<div>', {
    class: "card"
  }).appendTo("body");
  cardNode.data(card);
  var shapeNode = $('<canvas>', {
    class: "shape " + card.color + " " + card.shape + " " + card.fill
  }).appendTo(cardNode);
});

一旦完成，以下应该可以工作：

var canvases = $('.shape.red.diamond.solid');

canvases.each(function(i, c) {
    var context = c.getContext('2d');

    drawDiamond(context, 50, 50, 75, 100);
    c.fillStyle("#FF0000");
    ctx.fillRect(0, 0, c.width, c.height);
});

更新

您的示例更彻底，但它不是一个最小的、可重现的示例。请考虑以下内容。

var Game = {
  cards: [],
  $board: $('[data-display="game-board"]'),
  deal: function() {
    var self = this;
    /*
    $.getJSON('set.php?action=deal', function(data) {
      $.each(data, function(i, card) {
        self.cards.push(card);
      });
      self.displayCards();
      self.existingSet(data);
      self.setCardListeners();
      self.setPageListeners();
    });
    */
    self.cards.push({
      id: "ace-spade",
      shape: "spade",
      fill: "solid",
      color: "black",
      number: 1
    });
    self.displayCards();
  },
  displayCards: function() {
    var self = this;
    if (self.cards.length == 0) {
      return false;
    }
    $.each(self.cards, function(index, card) {
      var cardNode = $('<div>', {
        class: "card"
      }).appendTo(self.$board);
      cardNode.data({
        'id': card.id,
        'shape': card.shape,
        'fill': card.fill,
        'color': card.color,
        'number': card.number
      });

      for (var i = 0; i < card.number; i++) {
        cardNode.append($("<canvas>", {
          class: 'shape ' + card.color + ' ' + card.shape + ' ' + card.fill
        }));
      }
      self.$board.append(cardNode);

      // display 4 cards per row
      if ((index + 1) % 3 === 0) {
        self.$board.append($('<div>'));
      }
    });
  }
};

Game.deal();

.card {
  border: 1px solid #000;
  border-radius: 6px;
  width: 100px;
  height: 175px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-display="game-board"></div>

我无法使用 AJAX 进行测试，因此我用黑桃 A 填充了“套牌”。生成的 HTML 是：

<div data-display="game-board">
  <div class="card">
    <canvas class="shape black spade solid"></canvas>
  </div>
</div>

您需要在自己的代码中进一步测试。如果需要，请进一步更新您的问题。