javascript - 根据类将 Canvas 图像绑定(bind)到事件

Question

我这里有以下 fiddle :http://jsfiddle.net/tbt0jspd/2/

这个想法是使用盒子图像在屏幕上显示一系列盒子，这些盒子图像上有一个 box 类，但其中一个将有一个 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);
    }
};

第一个问题是如何如何将上述类添加到图像中？它们都应该有一个 box 类，5 个应该有一个 loss 类，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

您不能在盒子或 Canvas 上创建类，因为在 Canvas 上绘制图像后，它就变成了一组像素。

但是，您可以做的是根据其类(或其他属性)修改在 Canvas 上绘制的图像，但每当图像发生更改时，您都必须在 Canvas 上重新绘制它。

在 Canvas 上重新绘制它们是关键。

为了更轻松地控制，您可以考虑使用对象来表示框(而不仅仅是它们的图像)，这样您就可以轻松切换它们的状态/图像等。

<小时/>

更新

这是一个简单的示例，使用按钮打开所有盒子并随机分配它们的获胜/失败状态:http://jsfiddle.net/d7ov9pak/

    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);
        }
    }

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

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

请注意，如果这就是全部内容并且您不需要任何其他 Canvas 功能，也许您应该考虑不使用 Canvas ，而只需操作 DOM 元素以根据 CSS 类显示不同的图像。