使用半透明png遮罩画布

Masking a canvas with semi-transparent png

本文关键字：png 半透明      更新时间：2023-09-26

我想制作一个web应用程序，当用户在带有黑白图像的画布上悬停时，可以显示颜色。

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

希望这张照片能更多地说明我希望事情如何运作。

我知道这不是这个问题的直接答案，但你有没有想过从canvas切换到svg。svg内置了一些不错的过滤机制。当前的chrome和firefox版本都支持它。IE10也会支持。

下面是一个示例页面：

http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_svg-filter-effects.htm

用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>

您需要两个图像来执行此操作：test.jpg和testgray.jpg。

您可以尝试图形上下文的复合操作

http://www.html5canvastutorials.com/advanced/html5-canvas-global-composite-operations-tutorial/

演示：http://jsfiddle.net/HdyBG/7/

使用函数createRadialGradient可以创建渐变填充。

演示：http://jsfiddle.net/AuQTD/7/

我希望你能通过把这两者结合起来达到你所需要的。

相关文章：