Question

我在这里有以下小提琴：http://jsfiddle.net/tbt0jspd/2/

我们的想法是在屏幕上显示一系列方框，其中包含一个box类的框图像，但ONE将有一个win类，其余的将有一个等级lose。

这就是我处理将方框添加到canvas元素的方法：

var boxes = 6;

var boxImg = new Image();

boxImg.src = 'img/box.png';

boxImg.onload = function() {
    for (var i = 0, x = 20, y = 200; i < boxes; x += 148, y = 200, i++) {
        context.drawImage(boxImg, x, y);
    }
};

第一个问题是h 我是否将如上所述的类添加到图像中？它们应该都有一个类的盒子，5个应该有一个类丢失，1个类胜利。

然后，用户将单击这些框，并依次将一个已打开的类应用于它们。根据他们的输赢类别，这些框将变为不同的图像。

$('.box').not('.opened').on('click', function() {

    if( $(this).hasClass('win') ) {

        $(this).src = 'img/box-win.png';

    } else if( $(this).hasClass('lose') ) {

        $(this).src = 'img/box-lose.png';

    }

    $(this).addClass('opened');

    if( $('.opened').length == boxes )
    {
        alert('all boxes open');
    }

});

Answer 1

你不能在画布上或画布上放置类，因为在画布上绘制图像后，它只不过是一组像素。

然而，您可以做的是修改哪个图像基于其类（或其他属性）在画布上绘制，但是只要它被更改，您就必须在画布上重绘它。

在画布上重绘它们是关键。

为了便于控制，您可以考虑使用对象来表示框（而不仅仅是图像），这样您就可以轻松切换状态/图像等。

更新

下面是一个简单的示例，使用按钮打开所有框并随机为其分配赢/输状态：http://jsfiddle.net/d7ov9pak/

＆＃13;

    var boxes = 6;
    var canvas = document.getElementById('OpenTheBox');
    var context = canvas.getContext('2d');
    var boxImg = new Image();
    boxImg.src = 'http://i59.tinypic.com/vqp4c7.png';
    var winImg = new Image();
    winImg.src = 'http://i60.tinypic.com/2ujtr0i.png';
    var loseImg = new Image();
    loseImg.src = 'http://i60.tinypic.com/oivsc0.png';
    var cwidth = canvas.width = window.screen.width;
    var cheight = canvas.height = window.screen.height;
    var ctop = canvas.offsetTop;
    var cleft = canvas.offsetLeft;
    context.fillStyle = '#000000';
    context.fillRect(0, 0, cwidth, cheight);

    canvas.oncontextmenu = function (e) {
        e.preventDefault();
    };

    boxImg.onload = function () {
        for (var i = 0, x = 20, y = 200; i < boxes; x += 148, y = 200, i++) {
            context.drawImage(boxImg, x, y);
        }
    };



    function openBoxes() {
        // clear the canvas, just in case
        canvas.width = canvas.width;
        for (var i = 0, x = 20, y = 200; i < boxes; x += 148, y = 200, i++) {
            // assign a random win/lose box
            var image = (Math.random() >= 0.5) ? winImg : loseImg;
            context.drawImage(image, x, y);
        }
    }

＆＃13;

* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
}
html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000000;
}

＆＃13;

<button onclick="openBoxes()">Open the boxes</button>
<canvas id="OpenTheBox"></canvas>

＆＃13;

注意，如果这就是全部，并且您不需要任何其他画布功能，也许您应该考虑不使用画布，只需操纵DOM元素以显示基于CSS类的不同图像。 / p>

将Canvas图像绑定到基于类的事件

1 个答案: