trabajar con canvas y javascript

oliverarthurnardi · #1 (**permalink**) 23/09/2011, 10:49

Hola buenas tengo el siguiente script que estoy haciendo y lo que me gustaria saber como puedo lograr este efecto con las canvas y el javascript

ejemplo de lo que quiero hacer
http://jmartinho.net/digitalArt-html...art=closedLine

lo que llevo yo de momento:

Código HTML:

Ver original<html>
<head>
<script type="text/javascript">
window.addEventListener('load', function () {  
var elem = document.getElementById('linea');  
// Comprobar que puedp acceder al elemento y sus propiedades  
if (elem && elem.getContext) {  
  // contexto 2D  
  var context = elem.getContext('2d');  
  if (context) {  
    // Dibujamos  
    context.fillStyle = 'red';
    context.fillRect  (0, 5, 100, 2);  
  }  
}  
}, false);  
</script>  
</head>
<body>
<canvas id="linea" width="550" height="350" style="border: 1px solid #000000; margin-top:100px; margin-left:350px; background-color:#000000;">
</canvas>
</body>
</html>

espero que me podáis ayudar

Un saludo para todos

Aijoona · #2 (**permalink**) 23/09/2011, 10:56

Probablemente te convenga trabajar con alguna librería, como el ejemplo que das (en el que utilizan Processing.js)

oliverarthurnardi · #3 (**permalink**) 23/09/2011, 10:59

si es un ejemplo con processing.js pero el tema es que yo no me entero mucho con processing.js
y si existe la posibilidad de hacerlo con otra libreria librería

Panino5001 · #4 (**permalink**) 24/09/2011, 07:38

Si necesitás exactamente lo mismo podés copiar el código.
Si en cambio lo que necesitás es aprender, planteá tus dudas de manera más puntual y será más fácil ayudarte. Ejemplo:
1)Cómo dibujar una línea entre los puntos a y b?
2)Cómo hacer que se vaya desvaneciendo en cada nuevo fotograma?
Y luego otras ya más complejas como detectar proximidad, almacenar coordenadas de líneas generadas, etc.
Este sencillo código (tomado de este artículo: http://ejohn.org/blog/adv-javascript-and-processingjs/) que sólo usa canvas (no usa processing) te dará algunas ideas respecto del desvanecimiento en cada fotograma:

Código PHP:

  <html> 
<head> 
<title>Canvas</title> 
<script> 
window.onload = function(){ 
    var elem = document.createElement("canvas"); 
    elem.width = 500; 
    elem.height = 500; 
    document.body.appendChild( elem ); 
     
    var context = elem.getContext("2d"); 
     
    context.fillRect(0, 0, elem.width, elem.height); 
     
    var pos = 0, dir = 1; 
     
    setInterval(function(){ 
        context.rotate( 15 ); 
         
        context.fillStyle = "rgba(0,0,0,0.05)"; 
        context.fillRect(0, 0, elem.width, elem.height); 
         
        context.fillStyle = "rgba(255, 0, 0, 1)"; 
        context.fillRect(pos, pos, 20, 20); 
         
        pos += dir; 
         
        if ( pos > elem.width ) { 
            dir = -1; 
        } else if ( pos + 20 < 0 ) { 
            dir = 1; 
        } 
    }, 10); 
}; 
</script> 
</head> 
<body></body> 
</html>

Con respecto a dibujar líneas, ya en otros enlaces que te pasé tenés material más que suficiente.