animación en espera con canvas de HTML5

Estoy tratando de poner en práctica una animación deporte robadas de la clase mencionada in this question, sobre todo algo que se parece a esto:animación en espera con canvas de HTML5

enter image description here

pero no desea utilizar archivos gráficos, y estoy tratando de implementarlo puramente en lienzo html5 y javascript. Además, quiero un fondo negro circular en lugar de uno cuadrado. Como primer paso, traté de dibujar un marco estático (sin movimiento/rotación) y lo hizo:

<html> 
<head><script> 
window.onload = function(){ 
    var c=document.getElementById("waiting").getContext("2d"); 
    c.lineCap="round"; 
    c.fillStyle="#353535"; 
    c.translate(100,100); 
    function slit(p){ 
     shade = 256*p; 
     th = 2*Math.PI*p; 
     cos = Math.cos(th); 
     sin = Math.sin(th); 
     c.strokeStyle = '#'+((shade<<16)+(shade<<8)+shade).toString(16); 
     c.moveTo(55*cos, 55*sin); 
     c.lineTo(84*cos, 84*sin); 
     c.stroke(); 
     c.closePath(); 
    } 
    c.lineWidth=0; 
    c.arc(0,0,100,0,Math.PI*2); 
    c.fill(); 
    c.lineWidth=7; 
    for(var i = 0;i<1;i+=0.05){slit(i);} 
} 
</script></head> 
<body><canvas id="waiting" width=200 height=200></canvas></body> 
</html>

El resultado que obtengo es:

enter image description here

El problema es que, el lineCap="round" no funciona correctamente para todas las "ranuras", y el atributo lineWidth=0 no funciona para el borde del círculo. ¿Qué estoy haciendo mal? Lo comprobé con Chrome 16.0.912.63 y Firefox 10.0, y obtuve resultados similares.

Para el siguiente paso, voy a dejar que las partes de las funciones que he creado anteriormente interactúan con

window.animationFrames = (function(callback){ 
    return window.requestAnimationFrame || 
    window.webkitRequestAnimationFrame || 
    window.mozRequestAnimationFrame || 
    window.oRequestAnimationFrame || 
    window.msRequestAnimationFrame || 
    function(callback){window.setTimeout(callback, 1000/60);}; 
})();

pero por el momento, necesito resolver este problema en primer lugar.

Fuente

2011-12-27 sawa

aquí es un plugin de jQuery para hacer la misma cosa: http: // fgnass.github.com/spin.js/, pero quieres hacer esto como una experiencia de aprendizaje, entonces es genial – asawilliams

@asawilliams ya veo. Gracias por el enlace. No quería depender de bibliotecas externas, pero lo echaré un vistazo. Tal vez pueda extraer y estudiar las partes relevantes de esto. Pero aún así, quiero saber por qué mi código anterior no funciona como se esperaba. – sawa

@asawilliams La implementación que vinculó parece funcionar sin jQuery. Lo miraré más profundo. – sawa

Aquí hay un poco de confusión.

Cero no es un valor aceptable para la anchura de la línea. La especificación dicta que si dices lineWidth = 0 que no será operativo.

Además, no está usando lineWidth allí porque no está acariciando. fill() no tiene en cuenta el ancho de línea.

En cuanto a la otra cuestión, todo lo que tiene que hacer es llamar beginPath! Ver aquí:

http://jsfiddle.net/JfcDL/

Simplemente añadiendo la llamada beginPath y obtendrá esto con su código:

enter image description here

Lo que estaba haciendo incorrectamente estaba dibujando todo el recorrido hasta el momento con cada nuevo stroke(). Debe llamar al beginPath para abrir uno nuevo, de modo que stroke solo se aplique a la última parte y no a todas las partes hechas hasta el momento.

Fuente

2011-12-28 00:18:43

Gracias a la ayuda de las varias personas aquí, por fin dieron con este código, que funciona totalmente con el movimiento:

<html> 
<head><script> 
var r1 = 400; 
var r2 = 340; 
var r3 = 220; 
var slitWidth = 40; 
var speed = 0.0004; 
var attenuation = 1.7; 

function rgbToHex(r, g, b){ 
    return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); 
} 

window.nextFrame = (function(callback){ 
    return window.requestAnimationFrame || 
    window.webkitRequestAnimationFrame || 
    window.mozRequestAnimationFrame || 
    window.oRequestAnimationFrame || 
    window.msRequestAnimationFrame || 
    function(callback){window.setTimeout(callback, 1000/60);}; 
})(); 

window.onload = function(){ 
    var waiting=document.getElementById('waiting').getContext('2d'); 
    function slit(d,p){ 
     shade = Math.round(Math.pow(1-(d+p)%1, attenuation)*255) 
     th = Math.PI*2*(p); 
     cos = Math.cos(th); 
     sin = Math.sin(th); 
     waiting.strokeStyle = rgbToHex(shade, shade, shade); 
     waiting.beginPath(); 
     waiting.moveTo(r2*cos, r2*sin); 
     waiting.lineTo(r3*cos, r3*sin); 
     waiting.stroke(); 
     waiting.closePath(); 
    } 
    function frame(){ 
     waiting.arc(0,0,r1,0,Math.PI*2); 
     waiting.fill(); 
     var time = new Date().getTime()* speed; 
     for(var p = 1;p>0;p-=0.05){slit(time,p);} 
     nextFrame(function(){frame();}); 
    } 
    waiting.lineCap='round'; 
    waiting.lineWidth=slitWidth; 
    waiting.fillStyle='#353535'; 
    waiting.translate(r1, r1); 
    frame(); 
} 
</script></head> 
<body><canvas id='waiting' width=800 height=800></canvas></body> 
</html>

Fuente

2011-12-28 05:22:14 sawa

animación en espera con canvas de HTML5

Respuesta

Cuestiones relacionadas