Javascript 如何使画布轮廓成为悬停发光的透明png

是否可以自动为图像提供光晕效果，例如使用画布

canvas标记必须省略透明的

让它有一个外发光

<canvas id="canvas" width=960 height=960></canvas>

---

通过应用一系列增加模糊的重叠阴影，使画布路径发光

演示：

可以通过更改叠加的数量和模糊大小来更改光晕的样式

辉光效果的示例代码：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

// glow
var glowColor="blue";

ctx.save();
ctx.strokeStyle = glowColor;
ctx.shadowColor = glowColor;
ctx.shadowOffsetX=300;
for (var i = 0; i < 10; i++) {
    ctx.shadowBlur = i * 2;
    ctx.strokeRect(-270, 30, 75, 150);
}
ctx.restore();

使用ctx.getImageData从画布获取像素颜色数组

// grab the image's pixel data

imgData=ctx.getImageData(0,0,canvas.width,canvas.height);
data=imgData.data;

定义一个函数，用于检查画布上任意x，y处的像素阵列是否存在不透明像素

// draw the image
// (this time to grab the image's pixel data

ctx.drawImage(img,0,0);

// This is used by the marching ants algorithm
// to determine the outline of the non-transparent
// pixels on the image

var defineNonTransparent=function(x,y){
    var a=data[(y*cw+x)*4+3];
    return(a>20);
}

调用轮廓函数：

// call the marching ants algorithm
// to get the outline path of the image
// (outline=outside path of transparent pixels

var points=geom.contour(defineNonTransparent);

下面是一个示例结果：

• 光晕是使用重叠阴影自动生成的

• 手机的轮廓路径是使用marching ants算法计算的

---

虽然可能有更好的方法给猫剥皮，但这种天真的方法还是行得通的。（1） 将图像复制到画布（2）将具有非零alpha值的所有像素设置为辉光颜色。（3） 在步骤1和2中生成的画布上执行基于alpha的模糊。（不要触摸颜色，只与4个相邻点（上、下、左、右）平均alpha值）-根据需要重复（4）将原始图像重新绘制到画布上。模糊步骤将增加辉光颜色的像素数量，同时在边缘将其alpha值衰减为0。更新：它确实有效，但存在问题。我忘记了模糊操作会缩小光晕的大小。该方法构造的发光部分小于源图像的不透明部分：（.Source如果有帮助的话，可以使用。标记正确并按我们所说的方式进行操作，但是您会碰巧有一个工作的JSF吗？以防万一我遇到任何障碍。是的，我使用工作示例代码制作了最后一个图像（只是为了确保没有bug）：