如何使画布勾勒出悬停发光的透明png

Question

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

的 jsfiddle

canvas标签必须省略透明

让它有一个外在的光芒？

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

Answer 1

通过应用一系列重叠阴影并增加模糊

，使画布路径发光

演示：http://jsfiddle.net/m1erickson/Z3Lx2/

您可以通过改变叠加层数和模糊大小来更改发光的样式。

发光效果的示例代码：

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();

要获取手机图像的大纲路径，可以使用“行军蚂蚁”算法。

此算法将创建一个概述图像的路径。

在您的情况下，您可以将图像定义为所有不透明的像素。

这是一个非常好的“行军蚂蚁”实现，用于优秀的d3库：

https://github.com/d3/d3-plugins/blob/master/geom/contour/contour.js

它的使用方式如下：

在画布上绘制手机图像。

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

ctx.drawImage(img,0,0);

使用ctx.getImageData

从画布中获取像素颜色数组

// grab the image's pixel data

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

定义一个函数，用于检查画布上任何x，y处的非透明像素的像素阵列。

// 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);

以下是一个示例结果：

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

• 使用行军蚂蚁算法

计算手机的轮廓路径