在 2D 画布中，有没有办法给精灵一个轮廓？

Question

当角色被治愈/损坏/无论如何，我想给一个精灵一个轮廓，但我想不出一种使用二维画布进行编码的方法。如果可能的话，我认为这将是一个全局复合操作，但我想不出用其中一个来实现它的方法。

我确实找到了这个stackoverflow 答案，它建议创建一个更胖的纯色原版版本，并将原版放在它上面。这会给它一个大纲，但它似乎有很多额外的工作，特别是考虑到我正在使用占位符艺术。有更容易的方法吗？

这个问题与链接的问题不同，因为这是专门关于 HTML5 2D 画布的。它可能有其他问题不可用的解决方案。

对于它的价值，我不介意轮廓是否会创建更宽的边框或使精灵保持相同的大小，我只想要轮廓外观。

Answer 1

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

这将创建一个干净清晰的轮廓，每边的边框厚度相等。然而，它不太适合粗轮廓。图像绘制速度很快，尤其是当图像未缩放时，性能不是问题，除非您需要绘制一堆（在这种情况下，您将缓存绘图或无论如何使用精灵表）。

例子：

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>