javascript - HTML5 Canvas 移动 alpha mask-6ren

javascript - HTML5 Canvas 移动 alpha mask

转载作者：太空狗更新时间：2023-10-29 14:49:31

24

4

我有一个背景，假设是绿草。在背景之上，我有一个黑色覆盖层。我现在想要的是在叠加层上制作一个可移动的孔，以便您可以看到如下图所示的背景。

enter image description here

我对 Canvas 很陌生，所以我不确定我应该寻找什么。阿尔法面具？

那么我的问题是如何才能达到上图展示的效果呢？

如果它是 HTML，我会有两张草 map 片，一张作为背景，一张在叠加层上方，在一个 div 中，边框半径可以移动并计算位置。

谢谢。

最佳答案

您是否正在寻找一种移动的“手电筒”效果？

如果是这样，您可以通过绘制圆形路径然后将其用作剪切区域来实现:context.clip();

在 .clip() 之后绘制的任何内容都将通过剪切路径查看。

这是代码和 fiddle :http://jsfiddle.net/m1erickson/pRzxt/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
    $(function(){

        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");


        window.requestAnimFrame = (function(callback) {
          return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
          function(callback) {
            window.setTimeout(callback, 1000 / 60);
          };
        })();

        var radius=50;
        var x=100;
        var dx=10;
        var y=100;
        var dy=10;
        var delay=10;
        var img=new Image();
        img.onload=function(){
            var canvas1=document.getElementById("image");
            var ctxImg=canvas1.getContext("2d");
            ctxImg.drawImage(img,0,0,img.width,img.height,0,0,canvas.width,canvas.height);
            animate();
        }
        img.src="http://lh3.ggpht.com/_Z-i7eF_ACGI/TRxpFywLCxI/AAAAAAAAAD8/ACsxiuO_C1g/house%20vector.png";

        function animate() {
          if(--delay<0){
                    // update
                    x+=dx;
                    if(x-radius<0 || x+radius>=canvas.width){dx=-dx;}
                    y+=dy;
                    if(y-radius<0 || y+radius>=canvas.height){dy=-dy;}
                    delay=10;

                    // draw stuff
                    ctx.clearRect(0, 0, canvas.width, canvas.height);
                    ctx.save();
                    ctx.beginPath();
                    ctx.arc(x,y, radius, 0, 2 * Math.PI, false);
                    ctx.clip();
                    ctx.drawImage(img,0,0,img.width,img.height,0,0,canvas.width,canvas.height);
                    ctx.restore();
          }

          // request new frame
          requestAnimFrame(function() {
            animate();
          });
        }


    }); // end $(function(){});
</script>

</head>

<body>
<p>Image clipped by moving circle</p>
<canvas id="canvas" width=300 height=200></canvas>
<br/><p>Unclipped image</p>
<canvas id="image" width=300 height=200></canvas>

</body>
</html>

关于javascript - HTML5 Canvas 移动 alpha mask ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15301291/

24

4

0

文章推荐： c - 如何停止正在运行的 pthread 线程？

文章推荐： c - 跟踪斐波那契数列的递归

文章推荐：编译其他人的使用 math.h 的 C 程序

alpha - OpenVMS Alpha 引导扇区恢复
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。这个问题似乎不是关于 a specific programming problem, a softwar
android - 在不添加 alpha 的情况下混合重叠区域的 alpha
我不知道我问的是否可行。我有一个带有 Color.BLACK 的 Paint 和 0.2f 的 alpha 和两个对象: 它们都使用相同的Paint。我还测试了 2 个不同的 Paint 对象，仅更
alpha-vantage - Alpha Vantage API 不返回纳斯达克报价
Alpha Vantage API 不提供纳斯达克指数的报价(不再？)。我感兴趣的所有其他 indizes 似乎都很有魅力。例如，调用以下 URL(隐藏 API key )将提供 S&P 的报价(符
OpenGL 默认管道 alpha 混合对于 alpha 分量没有任何意义
问:有没有办法使用默认管道正确混合 Alpha 分量？问题:我正在将半透明表面绘制到纹理中，然后我想将该纹理传输到主框架后台缓冲区中。通常，当您使用直接的 Alpha 混合来实现透明度或抗锯齿时，会
algorithm - 给定颜色和 alpha，添加什么颜色和 alpha 来创建所需的颜色？
如果我有一个底层颜色和一个 alpha 值 (C&A)，并且想在屏幕上创建一个自定义 C&A，那么确定必须将什么 C&A 作为底层添加到底层之上的层的函数是什么？编辑: 我想复制 photoshop
ios - UIView alpha 与 UIColor alpha
我想知道它们之间的区别: 给我的 UIView 分配一个颜色 <1 alpha vs 为它指定一个不透明的颜色，但给 UIView 一个 <1 的 alpha 值。在屏幕截图上，我制作了两个 UIV
regex - alpha 正则表达式不会在 bash 中挑选出 alpha 字符
我在 OSX 10.9.4 上试图转换这个 python 正则表达式 p = "(2024 (?:(?:(?:[a-z|.]+ ?)+)) 93)"到 Unix 正则表达式以提高 grep 的速度。
Alpha 的 FFMPEG 问题第一个图像在 alpha 中运行良好，但从第二个开始没有显示
我为 4 张图像制作了这个脚本，第一张图像是 alpha，但从第二张开始什么都没有显示这是ffmpeg的代码确实有错误，但我没有。不明白:[swscaler @ 0x7fef79845e00] 使用
javascript - html5 Canvas 填充文本具有特定的 alpha 和背景具有不同的 alpha
我正在尝试将文本绘制到具有特定 Alpha 级别的 Canvas 上，并剪辑文本并使用其自己的 Alpha 级别绘制背景颜色: ctx.globalCompositeOperation = '...'
python - 在此示例中，为什么 RidgeCV 中的 alphas=alphas ？
我需要实现Lasso和Ridge回归，并通过交叉验证的方式计算超参数。我找到了执行此操作的代码，但我不太理解它。 lassocv = LassoCV(alphas=None, cv=15, max_i
android - 带 alpha channel 的位图着色器。 (Alpha 正在画黑..？)
我得到我的位图，将它用作着色器平铺模式。除了要绘制的形状轮廓外，PNG 大部分是 alpha。除了它画出轮廓，但被黑色包围，不是透明的(alpha)。 pnt.reset(); i
ios - 如何在不更改文本的 alpha 的情况下更改 TableViewCell 的 alpha？
我正在开发一个带有 tableViewController 的应用程序。我想在我的表格 View 单元格下方添加背景图片。我想让表格 View 单元格透明，以便我的整个表格 View 可以具有自定义背
ios - 如何在设置按钮 alpha 的同时更改 UIButton 的 alpha
如图所示，我有 2 个具有 0.5 alpha 和 1 alpha 的按钮。我想将第一张图片中标题的 alpha 更改为 1，这可能吗？到目前为止，我尝试了这些都不起作用: button.title
用于 alpha(alpha|digit)* 的 Python 正则表达式
我正在尝试生成一个 python 正则表达式来表示词法分析器的标识符。我的做法是: ([a-zA-Z]([a-zA-Z]|\d)*) 当我使用它时: regex = re.compile("\s*([
Python Alpha Numeric 失败，但 Alpha 有效
我正在尝试删除所有非数字字符的字符串，并且我已阅读 Why isn't isnumeric working? ，或者我必须有一个 unicode 字符串。然而，自从 is.alnum()和is.alp
architecture - Hadoop 2.x 行 : How "Alpha" is "alpha"
来自 hadoop 网站上的发布页面: “This release, like previous releases in hadoop-2.x series is still considered a
Android 并为(图像) View alpha 设置 alpha
真的没有与 setAlpha(int) 对应的 XML 属性吗？如果没有，有什么替代方案？最佳答案它比其他响应更容易。有一个 xml 值 alpha 采用 double 值。 android:a
alpha - 在 three.js 中，alpha channel 工作不一致
我正在three.js 中构建一个“ Papercut ”世界。我所有的模型都是简单的“平面”，我使用带有 Alpha channel 的 PNG 对它们进行纹理处理，以将平面修剪成更令人愉悦的形状。
Java 透明度 : Graphics2D. setComposite(...,alpha) vs. Color(...,alpha)
我想知道 Graphics2D.setComposite(..., alpha) 之间是否真的有区别和 Graphics2D.setColor(new Color(..., alpha))在 Java
JavaScript - 如何添加 2 个图像的 alpha 以使结果 alpha = 1？
我需要在两个图像之间进行转换 - 两个图像都是隐藏下面的 Sprite 的蒙版。每个面具的一部分是白色的，一部分是透明的。我需要两个图像的总 alpha 每次都为 1，这样蒙版看起来会平滑地改变其形状

首页

博学

6Ren·AI

商城

javascript - HTML5 Canvas 移动 alpha mask