7

背景があります。たとえば、緑の草です。背景の上に黒いオーバーレイがあります。私が今欲しいのは、下の画像のように背景が見えるように、オーバーレイに可動穴を作ることです。

ここに画像の説明を入力

私はキャンバスにかなり慣れていないので、何を探すべきかわかりません。アルファマスク？

私の質問は、上の画像に示されている効果をどのように達成できますか?

それが HTML の場合、草の 2 つの画像が表示されます。1 つは背景として、もう 1 つは div 内のオーバーレイの上にあり、移動して位置を計算するだけの境界線半径があります。

ありがとう。

4

2 に答える 2

10

動く「懐中電灯」のようなエフェクトをお探しですか?

その場合は、円形のパスを描画し、それを次のようにクリッピング領域として使用することでそれを行うことができます: 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,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>
于 2013-03-08T20:12:32.853 に答える
2

しばらく前に取り組んでいた小さなキャンバス テストで同様のことを行いました。あなたができることは、一番下のレイヤーの上にキャンバス要素を持つdivを作成し、その一番上のレイヤーのキャンバスに透明度のある放射状グラデーションを描くことです. ここにフィドルがあります：http://jsfiddle.net/CnEBQ/14/

特に、放射状グラデーションのこのコードを見てください。コンテキストは、トップ div キャンバスにアタッチされます。

var gradient = tCTX.createRadialGradient(CANVAS_SIZE.x/2, CANVAS_SIZE.y/2, 250, CANVAS_SIZE.x/2, CANVAS_SIZE.y/2, 0);  
gradient.addColorStop(0, "#000");  
gradient.addColorStop(1, "transparent");  
tCTX.fillStyle = gradient;
tCTX.fillRect(0, 0, CANVAS_SIZE.x, CANVAS_SIZE.y);

そこには少し悪いコードがあるかもしれませんが、これがあなたが行きたい場所かどうかのアイデアを与えるはずです. タイマーまたは何らかのイベントで、必要に応じて最上層の「穴」を再描画して、それを動かすことができます。また、グラデーション設定をいじって、多かれ少なかれ「暗さ」を得ることができます。

ここで使用している関数の適切な参照を探すのにかなりの時間を費やしていますが、これらの関数の詳細な説明を探すのに適した場所は 、グラデーション関数のパラメーターが説明されている Mozilla Canvas APIです。すぐにはわからないため、特に便利です。

于 2013-03-08T19:26:03.750 に答える