javascript - globalCompositeOperation 在背景上绘制白色

Question

我在 html5 Canvas 的 javascript 中使用 globalCompositeOperation 时遇到问题。

https://jsfiddle.net/6j51kxeh/

我使用“destination-in”在一颗心的 Sprite 中绘制一个黑色方 block ，所以当玩家缺少那颗心时，它会显示出来。它可以很好地绘制黑色的心，但它会在其他所有内容之上绘制白色。如果您注释掉 globalCompositeOperation 行，您将看到它绘制在其他事物之上(只是来自同一 Sprite 表的随机 Sprite 组)。感谢您的帮助。

我在链接到 jsfiddle 时也遇到了麻烦，但我已经玩完了。

var canvas = document.createElement("canvas");    

canvas.height = window.innerHeight;
canvas.width  = window.innerWidth;

var scale = 4;

document.body.appendChild(canvas);

var draw = canvas.getContext("2d");

draw.imageSmoothingEnabled = false;
draw.mozImageSmoothingEnabled = false;
draw.oImageSmoothingEnabled = false;
draw.webkitImageSmoothingEnabled = false;

var assetsToLoad = [];
var assetsLoaded = 0;

var sprites = new Image();
sprites.onload = loadHandler;
sprites.src = "https://dl.dropboxusercontent.com/u/38825680/Site/images/sprites.png";
assetsToLoad.push(sprites);


function loadHandler() {
    assetsLoaded++;
    if(assetsLoaded === assetsToLoad.length) {
        console.log(assetsLoaded + " asset[s] loaded");

        Draw();
    }
};

function Draw() {
    draw.save();
    draw.scale(scale,scale);

    draw.drawImage(sprites,0,64,64,64,0,0,64,64);
    // draw.drawImage(sprites,112,80,16,16,0,0,16,16);
    draw.fillStyle = "black";
    draw.fillRect(0,0,16,16);

    //draw.globalCompositeOperation = "destination-in";

    draw.drawImage(sprites,96,48,16,16,0,0,16,16);


    draw.restore();
}

Answer 1

destination-in 合成具有破坏性，因为它会删除 Canvas 上的所有内容，除了新(心)与任何现有非透明像素重叠的位置。因此这种形式的合成不太可能是您所需要的。

澄清一下:您想在另一个 Sprite 图像上绘制心形 Sprite ，然后从添加了心形的另一个 Sprite 图像中清除该 Sprite 吗？

如果是，那么:

• 要添加心形，请将心形 Sprite 绘制在另一个 Sprite 上方。
• 要清除心脏，只需重新绘制另一个 Sprite 即可。

示例代码和演示:

var canvas = document.createElement("canvas");    

canvas.height = 640;//window.innerHeight;
canvas.width  = 960;//window.innerWidth;

var scale = 4;

document.body.appendChild(canvas);

var draw = canvas.getContext("2d");

draw.imageSmoothingEnabled = false;
draw.mozImageSmoothingEnabled = false;
draw.oImageSmoothingEnabled = false;
draw.webkitImageSmoothingEnabled = false;

var assetsToLoad = [];
var assetsLoaded = 0;

var sprites = new Image();
sprites.onload = loadHandler;

sprites.src = "https://dl.dropboxusercontent.com/u/38825680/Site/images/sprites.png";
assetsToLoad.push(sprites);


function loadHandler() {
  assetsLoaded++;
  if(assetsLoaded === assetsToLoad.length) {
    console.log(assetsLoaded + " asset[s] loaded");

    draw.scale(scale,scale);
    Draw();
  }
};

function Draw() {
  draw.drawImage(sprites,0,64,64,64,0,0,64,64);
}



function addHeart(x,y){
  draw.fillStyle = "black";
  draw.fillRect(x,y,16,16);
  draw.drawImage(sprites,96,48,16,16,x,y,16,16);
}

function removeHeart(x,y,spriteX,spriteY){
  draw.clearRect(x,y,16,16);
  draw.drawImage(sprites,spriteX,spriteY+64,16,16,x,y,16,16)
}

$('#add').click(function(){
  addHeart(0,0);
});

$('#remove').click(function(){
  removeHeart(0,0,0,0);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id=add>Add heart</button>
<button id=remove>Remove heart</button>