本文介绍了如何使画布轮廓为悬浮辉光的透明png的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

是否可以使用画布自动给图片发光效果?







您可以通过改变叠加层的数量和模糊尺寸来更改辉光的样式。 / 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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-06 00:18