javascript - 在 2D Canvas 中，有没有办法给 Sprite 一个轮廓？

Question

我想在 Angular 色被治愈/损坏/发生任何情况时给 Sprite 一个轮廓，但我想不出一种使用 2d Canvas 对此进行编码的方法。如果可能的话，我认为它会是 global composite operation ，但我想不出用其中一个来实现它的方法。

我确实找到了这个 stackoverflow answer建议创建原件的更厚实的纯色版本，然后将原件放在上面。这会给它一个大纲，但它似乎需要做很多额外的工作，尤其是考虑到我正在使用占位符艺术。有更容易的方法吗？

这个问题与链接的问题不同，因为它专门针对 HTML5 2D Canvas 。它可能有其他问题不可用的解决方案。

就其值(value)而言，我不介意轮廓是否创建了更宽的边框或保持 sprite 大小相同，我只想要轮廓外观。

Answer 1

• 只需在原始图像周围的 8 个位置绘制原始图像
• 将复合模式更改为source-in 并填充轮廓颜色
• 将合成模式改回source-over 并在正确位置绘制原始图像

这将创建一个清晰锐利的轮廓，每边的边框厚度都相等。然而，它不太适合粗轮廓。图像绘制速度很快，尤其是当图像未缩放时，因此性能不是问题，除非您需要绘制一堆(在这种情况下，您将缓存绘图或无论如何使用 sprite-sheet)。

例子:

var ctx = canvas.getContext('2d'),
    img = new Image;

img.onload = draw;
img.src = "http://i.stack.imgur.com/UFBxY.png";

function draw() {

  var dArr = [-1,-1, 0,-1, 1,-1, -1,0, 1,0, -1,1, 0,1, 1,1], // offset array
      s = 2,  // scale
      i = 0,  // iterator
      x = 5,  // final position
      y = 5;
  
  // draw images at offsets from the array scaled by s
  for(; i < dArr.length; i += 2)
    ctx.drawImage(img, x + dArr[i]*s, y + dArr[i+1]*s);
  
  // fill with color
  ctx.globalCompositeOperation = "source-in";
  ctx.fillStyle = "red";
  ctx.fillRect(0,0,canvas.width, canvas.height);
  
  // draw original image in normal mode
  ctx.globalCompositeOperation = "source-over";
  ctx.drawImage(img, x, y);
}

<canvas id=canvas width=500 height=500></canvas>