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进行测试，因此我在“ deck”中填充了黑桃A。生成的HTML为：

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

您将需要使用自己的代码进行进一步测试。如果需要，请进一步更新您的问题。

在“动态”画布上绘制

1 个答案: