如何使画布轮廓为悬浮辉光的透明png [英] how to make canvas outline a transparent png for on hover glow

问题描述

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

您可以通过改变叠加层的数量和模糊尺寸来更改辉光的样式。 / 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 <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

这样使用：

在画布上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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！