Pregunta

Estoy pensando en hacer un sitio web con un uso bastante intenso de JavaScript / lienzo y he estado mirando Procesamiento .js y me parece que haría la manipulación del lienzo significativamente más fácil. ¿Alguien sabe alguna razón por la que no debería usar Processing.js? Entiendo que los navegadores más antiguos no podrán usarlo, pero por ahora está bien.

¿Fue útil?

Solución

Como se mencionó, IE no es compatible con Processing.js (incluido IE8 beta). También he encontrado que Processing.js es un poco lento en términos de rendimiento, en comparación con solo usar el lienzo (especialmente si está analizando una cadena con lenguaje de procesamiento, en lugar de usar la API de JavaScript).

Personalmente prefiero la API de lienzo sobre el contenedor de procesamiento, porque me da más control. Por ejemplo:

La función de línea de procesamiento () se implementa de esta manera (aproximadamente):

function line (x1, y1, x2, y2) {
  context.beginPath();
  context.moveTo(x1, y1);
  context.lineTo(x2, y2);
  context.closePath();
  context.stroke();
};

Y lo usarías así (suponiendo que estés usando la API expuesta a JavaScript):

var p = Processing("canvas")
p.stroke(255)

////Draw lines...///
p.line(0,0,10,10)
p.line(10,10,20,10)
//...and so on
p.line(100,100,200,200)
////End lines////

Observe que cada llamada a line () tiene que abrir y cerrar una nueva ruta, mientras que con la API de lienzo puede dibujar todas las líneas dentro de un solo bloque beginPath / endPath, mejorando significativamente el rendimiento:

context.strokeStyle = "#fff";
context.beginPath();

////Draw lines...///
context.moveTo(0, 0);
context.lineTo(10, 10);
context.lineTo(20, 10);
//...so on
context.lineTo(200, 200);
////End lines...///

context.closePath();
context.stroke();

Otros consejos

Si estás de acuerdo con que no funcione en IE7, entonces hazlo. Lo he tenido funcionando en Firefox 3. Es una forma elegante de traer efectos Silverlight / Flash a tu página.

Mi corazonada es que las bibliotecas como Processing.js cambiarán o se actualizarán en una ruta de acceso rápido, así que prepárate para ejecutarse cuando lo hagan y mantente al día con las nuevas características.

No simplifica el dibujo en tu lienzo. Lo que hace es simplificar la tarea de animación si está utilizando lienzo. Si está haciendo animación y no le importa el soporte completo del navegador, use Processing.js. Si no está haciendo animación (por ejemplo, si está haciendo gráficos o esquinas redondeadas), no agregue la sobrecarga de Processing.js.

De cualquier manera, te recomiendo que aprendas cómo usar la API del lienzo directamente. Comprender la API del lienzo, especialmente las transformaciones, te será de gran ayuda incluso si estás usando Processing.js.

Yo diría que use Flash en su lugar. Hay más navegadores que tienen instalado Flash, que la cantidad de navegadores que funcionan con processing.js. Además, obtendrá un rendimiento mucho mejor de Flash en comparación con el uso de JavaScript (al menos por el momento, aunque hay proyectos en proceso de acelerar mucho JS, pero aún falta un poco)

Pruebe la nueva implementación de javascript p5js p5js.org

Ah, y en respuesta a la respuesta de Leo, en realidad no tiene que usar la función línea en el procesamiento o p5js, hay beingShape y beingPath separados funciona de forma similar a la api de lienzo.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top