HTML5 Przenosząca płótno maska alfa

Mam tło, załóżmy, że to zielona trawa. W tle mam czarną nakładkę. Teraz chcę zrobić ruchomy otwór w nakładce, aby można było zobaczyć tło, jak na poniższym obrazku.HTML5 Przenosząca płótno maska alfa

enter image description here

Jestem całkiem nowy, płótno, więc nie jestem pewien, co mam szukać. Maska alfa?

Moje pytanie brzmi: jak mogę osiągnąć efekt pokazany na powyższym obrazku?

Gdyby był HTML, miałbym dwa obrazy trawy, jedną jako tło i jedną nad warstwą w dziale o promieniu obramowania, który może się poruszać i obliczać pozycje.

Dzięki.

Źródło

2013-03-08 tbleckert

Jak to nie pytanie? – tbleckert

Aby być uczciwym, może to po prostu zbyt szerokie? Może coś, co powinno/może być przeniesione na listę stosów programistów? – mafafu

Pytanie o technikę jest złe? Prosta odpowiedź, taka jak "użyj ścieżki obcinania", zrobi to za mnie. Po prostu nie wiedziałem, czego szukać. – tbleckert

Szukasz efektu ruchomej "latarki"?

Jeśli tak, możesz to zrobić, rysując okrągłą ścieżkę, a następnie używając jej jako regionu wycinania z: context.clip();

Cokolwiek narysowanego po .clip() będzie wyświetlana przez ścieżkę przycinającą.

Oto kod i 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>

Źródło

2013-03-08 20:12:32 markE

Och, dziękuję, to dokładnie to, czego chcę. Spróbuję i wrócę. – tbleckert

Zrobiłem coś podobnego do małego testu płótna, nad którym pracowałem jakiś czas temu. Możesz utworzyć element div z elementem canvas na wierzchniej warstwie i narysować gradient radialny z przezroczystością na kanwie tej warstwy. Mam tutaj skrzypce: http://jsfiddle.net/CnEBQ/14/

W szczególności spójrz na ten fragment kodu dla gradientu radialnego. Kontekst jest przymocowany do górnej div płótnie:

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);

Nie może być trochę zły kod tam, ale powinno dać ci pomysł, czy to gdzie chcesz iść. W razie potrzeby możesz przerysować "dziurę" w górnej warstwie na zegarze lub w jakimś wydarzeniu, aby ją przenieść. Możesz grać z ustawieniem gradientu, aby uzyskać mniej lub więcej "ciemności".

Mam sporo czasu próbując znaleźć dobre referencje do funkcji używam tutaj, ale przyzwoite miejsce do szukania dalszych wyjaśnień tych funkcji jest the Mozilla Canvas API gdzie parametry do funkcji gradientu są wyjaśnione. Szczególnie przydatny, ponieważ nie są od razu oczywiste.

Źródło

2013-03-08 19:26:03 mafafu

Ładny efekt - gradient jako przezroczystość! – markE

Wow, to jest takie fajne! miły! – tbleckert

HTML5 Przenosząca płótno maska ​​alfa

Odpowiedz

Powiązane problemy

HTML5 Przenosząca płótno maska alfa