在2D画布中，有没有办法给一个精灵一个大纲？ [英] In a 2D canvas, is there a way to give a sprite an outline?

问题描述

我想给一个精灵一个大纲，当角色得到治愈/损坏/任何，但我不能想到一个方法来编码这个使用2d画布。如果可能，我会认为这是一个全局复合操作，但我不能想到一个方法来实现它与其中之一。

I'd like to give a sprite an outline when the character gets healed/damaged/whatever but I can't think of a way to code this using the 2d canvas. If it were possible, I'd think it would be a global composite operation, but I can't think of a way to achieve it with one of them.

我发现这个 stackoverflow answer 建议您建立一个更胖的，纯色版的原件，把原件放在它的顶部。这将给它一个大纲，但它似乎很多额外的工作，尤其是考虑到我使用占位符艺术。有更容易的方法吗？

I did find this stackoverflow answer that recommends creating a fatter, solid color version of the original and put the original on top of it. That would give it an outline, but it seems like a lot of extra work especially considering I'm using placeholder art. Is there an easier way?

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

This question is different from the one linked because this is specifically about the HTML5 2D canvas. It may have a solution not available to the other question.

对于什么是值得的，我不介意如果轮廓创建一个更宽的边框或保持sprite相同

For what it's worth, I don't mind if the outline creates a wider border or keeps the sprite the same size, I just want the outline look.

推荐答案

• 只需在8个位置绘制原始图片原始图片


• 将复合模式更改为源代码，并填写大纲颜色


• 将合成模式更改为源切换，并在正确的位置绘制原始图像


• Just draw your original image in 8 position around the original image
• Change composite mode to source-in and fill with the outline color
• Change composite mode back to source-over and draw in the original image at correct location

这将创建一个清晰的锐利轮廓，每边的边框厚度相等。它不适合于粗轮廓。图像绘图很快，特别是当图像不缩放时，因此性能不是一个问题，除非你需要绘制一束（在这种情况下，你会缓存绘图或使用sprite-sheet）。

This will create a clean sharp outline with equal border thickness on every side. It is not so suited for thick outlines however. Image drawing is fast, especially when image is not scaled so performance is not an issues unless you need to draw a bunch (which in that case you would cache the drawings or use a sprite-sheet anyways).

示例：

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>

这篇关于在2D画布中，有没有办法给一个精灵一个大纲？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！