Javascript 绘制图像轮廓的最佳实践

我试过三种方法，但效果不太好

复制并填充图像，然后进行偏移。演示是

var ctx=canvas.getContext（'2d'），
img=新图像；
img.onload=牵引；
img.src=”http://i.stack.imgur.com/UFBxY.png";
函数绘图（）{
var dArr=[-1，-1,0，-1,1,1，-1,0,1,0，-1,1,0,1,1]，//偏移量数组
s=20，//厚度刻度
i=0，//迭代器
x=5，//最终位置
y=5；
//在与按s缩放的阵列的偏移处绘制图像
对于（；i

---

您可以尝试使用数学方法，而不使用偏移量数组

var ctx=canvas.getContext（'2d'），
img=新图像；
img.onload=牵引；
img.src=”http://i.stack.imgur.com/UFBxY.png";
函数绘图（）{
var s=20，//厚度刻度
x=5，//最终位置
y=5；
对于（i=0；i<360；i++）
ctx.drawImage（img，x+Math.sin（i）*s，y+Math.cos（i）*s）；
//充满色彩
ctx.globalCompositeOperation=“来源于”；
ctx.fillStyle=“红色”；
ctx.fillRect（0，0，canvas.width，canvas.height）；
//在正常模式下绘制原始图像
ctx.globalCompositeOperation=“源代码结束”；
ctx.drawImage（img，x，y）；
}

---

完美！但是头发的轮廓太光滑了@liajoy在这里看一看：我希望这能给你一点透视图，看看风景背后发生了什么太棒了！但是如果图像没有透明区域，笔划会很锐利。如果您想玩透明游戏，请访问@liajoy使用

globalAlpha

这里有一把小提琴：