问题描述
是否可以使用画布自动给图片发光效果?
您可以通过改变叠加层的数量和模糊尺寸来更改辉光的样式。 / p>
辉光效果的示例代码:
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 ctx.shadowBlur = i * 2;
ctx.strokeRect(-270,30,75,150);
}
ctx.restore();
要获取手机图像的轮廓路径,可以使用
此算法将创建一个概述图像的路径。
在您的情况下,您会将图片定义为不透明的所有像素。
执行在优秀的d3库中使用的行进蚁:
这样使用:
在画布上DrawImage您的手机。
//绘制图像
//(这次抓取图像的像素数据
ctx.drawImage(img,0,0 );
使用ctx.getImageData从画布中获取像素颜色数组
//获取图像的像素数据
imgData = ctx.getImageData(0,0,canvas.width,canvas.height) ;
data = imgData.data;
定义一个函数,
//这是由行进蚁算法使用的
//确定图像上不透明的
//像素的轮廓
var defineNonTransparent = function(x,y){
var a = data [(y * cw + x)* 4 + 3];
return(a> 20);
}
调用轮廓函数:
$ b b //调用移动蚂蚁算法
//获取图像的轮廓路径
//(outline =外部路径的透明像素
var points = geom.contour(defineNonTransparent);
示例结果:
-
使用重叠阴影自动生成辉光
$ b -
手机的大纲路径是使用移动蚂蚁算法计算的
Is it possible to give a glow effect to an image automatically, say using canvas?
jsfiddle
The canvas tag would have to omit the transparent
and make it have an outter glow?
<canvas id="canvas" width=960 height=960></canvas>
解决方案 Make a canvas path glow by applying a series of overlapping shadows with increasing blur
A Demo: http://jsfiddle.net/m1erickson/Z3Lx2/
You can change the styling of the glow by varying the number of overlays and the blur size.
Example code for a glow effect:
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();
To get the outline path of your phone image, you can use the "marching ants" algorithm.
This algorithm will create a path that outlines an image.
In your case you would define the image as all pixels that are not transparent.
Here's a very good implementation of "marching ants" that is used in the excellent d3 library:
https://github.com/d3/d3-plugins/blob/master/geom/contour/contour.js
It's used like this:
DrawImage your phone on the canvas.
// draw the image
// (this time to grab the image's pixel data
ctx.drawImage(img,0,0);
Get the pixel color array from the canvas using ctx.getImageData
// grab the image's pixel data
imgData=ctx.getImageData(0,0,canvas.width,canvas.height);
data=imgData.data;
Define a function that checks the pixel array for non-transparent pixels at any x,y on the canvas.
// 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 contour function:
// call the marching ants algorithm
// to get the outline path of the image
// (outline=outside path of transparent pixels
var points=geom.contour(defineNonTransparent);
Here's an example result:
the glow is automatically generated using overlapping shadows
the outline path of the phone is calculated using the marching ants algorithm
这篇关于如何使画布轮廓为悬浮辉光的透明png的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!
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 ctx.shadowBlur = i * 2;
ctx.strokeRect(-270,30,75,150);
}
ctx.restore();
//绘制图像
//(这次抓取图像的像素数据
ctx.drawImage(img,0,0 );
//获取图像的像素数据
imgData = ctx.getImageData(0,0,canvas.width,canvas.height) ;
data = imgData.data;
//这是由行进蚁算法使用的
//确定图像上不透明的
//像素的轮廓
var defineNonTransparent = function(x,y){
var a = data [(y * cw + x)* 4 + 3];
return(a> 20);
}
//调用移动蚂蚁算法
//获取图像的轮廓路径
//(outline =外部路径的透明像素
var points = geom.contour(defineNonTransparent);
使用重叠阴影自动生成辉光
$ b手机的大纲路径是使用移动蚂蚁算法计算的
<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();
// draw the image
// (this time to grab the image's pixel data
ctx.drawImage(img,0,0);
// grab the image's pixel data
imgData=ctx.getImageData(0,0,canvas.width,canvas.height);
data=imgData.data;
// 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);
the glow is automatically generated using overlapping shadows
the outline path of the phone is calculated using the marching ants algorithm