globalCompositeOperation绘制白色背景

globalCompositeOperation drawing white over background

本文关键字：背景 白色 绘制 globalCompositeOperation      更新时间：2023-09-26

我有麻烦的globalCompositeOperation在javascript的html5画布。

https://jsfiddle.net/6j51kxeh/

我使用"destination-in"在一个心形精灵中画一个黑色方块，所以当玩家失去那颗心时，它就会显示出来。它画的是黑心，但它画的是白色。如果你注释掉globalCompositeOperation行，你会看到它被绘制在其他东西的顶部(只是来自同一精灵表的一组随机精灵)。谢谢你的帮助。

我也有麻烦，只是链接到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();
}

destination-in合成在某种意义上是破坏性的，它将擦除画布上的所有内容，除了新的(心脏)重叠任何现有的非透明像素。因此，这种形式的合成不太可能是您需要的。

澄清一下:你想在另一个精灵图像上绘制心形精灵，然后从添加了心形的另一个精灵图像中清除这个精灵?

如果是，则:

  • 要添加心形，将心形精灵画在另一个精灵上。
  • 要清除心脏，只需重新绘制其他精灵。

示例代码和演示: 

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>

相关文章：