所以我有一个循环,它根据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);
}
但是当我静态创建画布时,它会起作用。
能否请您帮我发现问题或解决方案?谢谢!
答案 0 :(得分:0)
建议以下代码:
$.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>
您将需要使用自己的代码进行进一步测试。如果需要,请进一步更新您的问题。