javascript – HTML5 Canvas移动alpha蒙版

我有一个背景,让我们说它是绿草.在背景之上,我有一个黑色覆盖.我现在想要的是在叠加层中制作一个可移动的孔,以便您可以看到如下图所示的背景.

我对画布很新,所以我不确定我应该寻找什么.阿尔法面具？

所以我的问题是我如何才能达到上图所示的效果？

如果它是HTML,我将有两个草的图像,一个作为背景,一个在叠加上面的div,边界半径可以移动并只计算位置.

谢谢.

解决方法

你在寻找一种动人的“手电筒”效果吗？

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

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

这是代码和小提琴：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,img.width,img.height,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,canvas.height);
                    ctx.save();
                    ctx.beginPath();
                    ctx.arc(x,y,radius,2 * Math.PI,false);
                    ctx.clip();
                    ctx.drawImage(img,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蒙版

解决方法

相关文章