1. 首页
  2. 问答
  3. 用半透明PNG遮罩画布

用半透明PNG遮罩画布

2012-02-18 183 views
0

我想制作一个Web应用程序，用户可以在悬停带黑白图像的画布时显示颜色。用半透明PNG遮罩画布

我的第一个尝试是在画布上用bw图像设置一个css背景图像，并在画布上用彩色圆圈显示彩色图像。通过这种方式，圆形具有坚实的边缘，但我想要的是具有褪色边缘的圆形。有没有办法用半透明的png而不是实心的画布圆来显示彩色图像？

希望this image将解释更多我想要的东西工作。

来源

2012-02-18 Lavve

回答

0

开始使用processing.js框架小项目。仍然需要大量的工作。但也许，它指向你到正确的方向：

编辑：在代码

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <script type="text/javascript" src="processing-1.3.6.js"></script> 
    </head> 
    <body style="background-color:blue"> 
     <div id="container" style="background-image: url('testgrey.jpg');overflow:hidden;background-clip:content-box;width: 400px;height: 400px" > 
      <canvas id="test" width="400" height="400"></canvas> 
     </div> 
     <script type="text/processing" data-processing-target="test"> 

     /* @pjs preload="test.jpg"; */ 
     /* @pjs transparent=true; */ 
     int nX, nY; 
     int radius = 40; 
     double powRadius = Math.pow(radius,2); 

     void setup() 
     { 
     size(400,400); 
     frameRate(25); 
     background(0,0,0,0); 
     a = loadImage("test.jpg"); 
     } 

     void draw(){ 

     int left = nX - radius; 
     int right = left + radius * 2; 
     int top = nY - radius; 
     int bottom = top + radius * 2; 
     for (int j = top; j <= bottom; ++j) 
     { 
     for (int k = left; k <= right; ++k) 
     { 
     double dist = Math.pow(nX - k, 2.0) + Math.pow(nY - j, 2.0); 
     if (dist <= powRadius) 
     { 
     color original= a.get(k,j); 
     int newAlpha = 255-dist/powRadius*255; 
     if(alpha(get(k,j))<newAlpha){ 
     color toDraw = color(red(original),green(original),blue(original),newAlpha); 
     set(k,j,toDraw); 
     } 
     } 
     } 
     } 

     } 

     void mouseMoved(){ 
     nX = mouseX; 
     nY = mouseY; 
     } 
     </script> 
    </body> 
</html>

一些额外的编辑需要两个图像EXCUTE这样的：test.jpg放在和testgrey.jpg。

来源

2012-02-18 12:52:44 Alex

相关问题

 相关问题