Как удалить элементы на холсте с точки зрения зрителя?

Где я могу найти пример удаления элементов на холсте? Идея состоит в том, что с точки зрения зрителя пятна/капли падают на холст. Как я могу это достичь? Любая помощь пожалуйста.Как удалить элементы на холсте с точки зрения зрителя?

С чего начать? единственное, что я нашел, что приблизилось к идее: http://threedubmedia.com/code/event/drop, а затем живой вариант.

источник

2013-03-12 esther

Вот пример того, как добавить пару кофейных пятен на холсте:

enter image description here

Это код кофе пятна и Fiddle: http://jsfiddle.net/m1erickson/jkK7L/

<!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(){ 

    // get hold of the canvas 
    var canvas=document.getElementById("canvas"); 
    // get hold of the canvas's context, which we use to draw with 
    var context=canvas.getContext("2d"); 

    // ask for a new image 
    var img=new Image(); 
    // wait for the image to load 
    img.onload=function(){ 
     // draw the coffee stains on the canvas using the context 
     context.drawImage(img,0,0,img.width,img.height,50,50,100,100); 
    } 
    // tell the new image we asked for above where to find the image file 
    // note: strangely, this must come after img.onload 
    img.src="http://dl.dropbox.com/u/139992952/coffee-stain.png"; 

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

</head> 

<body> 
    <canvas id="canvas" width=300 height=300></canvas> 
</body> 
</html>

Вот аккуратное моделирование волнистой воды на холсте:

Нажмите на холсте, чтобы увидеть эффект ряби: http://www.script-tutorials.com/demos/97/index.html

А вот пример знак анимации

Вот код и Fiddle: http://jsfiddle.net/m1erickson/r8Grf/

<!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); 
      }; 
     })(); 

     $("go").html("Loading..."); 

     var count=80; 
     var win=new Image(); 
     var splash; 
     win.onload=function(){ 
      splash=new Image(); 
      splash.onload=function(){ 
       ctx.drawImage(win,0,0); 
      } 
      splash.src="http://dl.dropbox.com/u/139992952/splash2.svg"; 
     } 
     win.src="http://dl.dropbox.com/u/139992952/window.png"; 

     $("#go").click(function(){ alert("go"); count=80; animate(); }); 

     function animate() { 
      // drawings 
      if(--count>1){ 
       ctx.clearRect(0, 0, canvas.width, canvas.height); 
       ctx.save(); 
       ctx.drawImage(win,0,0); 
       ctx.globalCompositeOperation = 'destination-over'; 
       ctx.drawImage(splash,0,0,splash.width,splash.height,25,25,splash.width/count,splash.height/count); 
       ctx.restore(); 
      } 

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

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

</head> 

<body> 
    <br/><button id="go">Splash!</button><br/><br/> 
    <canvas id="canvas" width=326 height=237></canvas> 
</body> 
</html>

источник

2013-03-12 22:20:18 markE

Tnx для вашего ответ, но это далеко не в моей лиге! Особенно часть функции оживляет счет, ctx .... Я не могу понять это. Остальное я могу справиться ... Извините – esther

Нет проблем, я добавил к своему ответу более простой пример того, как вы можете добавить пятно кофе на холст html5. Я добавил комментарии в код, чтобы помочь вам начать работу. Держите кодирование и получайте удовольствие! – markE

Как удалить элементы на холсте с точки зрения зрителя?

ответ

Смежные вопросы