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.