html5 कैनवास के साथ प्रतीक्षा कर रहा है एनीमेशन

मैं तरह in this question उल्लेख का एक wating एनीमेशन, विशेष रूप से कुछ है कि इस तरह दिखता है लागू करने के लिए कोशिश कर रहा हूँ:html5 कैनवास के साथ प्रतीक्षा कर रहा है एनीमेशन

enter image description here

लेकिन मैं नहीं चाहिए ग्राफिक फ़ाइलों का उपयोग करने के लिए, और कर रहा हूँ इसे पूरी तरह से एचटीएमएल 5 कैनवास और जावास्क्रिप्ट में लागू करने की कोशिश कर रहा है। इसके अलावा, मैं एक वर्ग के बजाय एक गोलाकार काला पृष्ठभूमि चाहता हूँ। पहले कदम के रूप में, मैं (किसी भी आंदोलन/रोटेशन के बिना) एक स्थिर फ्रेम आकर्षित करने के लिए कोशिश की और ऐसा किया:

<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>

परिणाम मैं मिलता है:

enter image description here

समस्या यह है कि है, lineCap="round" सभी "स्लिट" के लिए सही ढंग से काम नहीं कर रहा है, और lineWidth=0 विशेषता सर्कल के किनारे के लिए काम नहीं कर रही है। मैं क्या गलत कर रहा हूं? मैंने क्रोम 16.0.912.63 और फ़ायरफ़ॉक्स 10.0 के साथ इसकी जांच की, और इसी तरह के परिणाम मिल गए।

अगले कदम के लिए, मैं कार्यों कि मैं ऊपर बनाया के कुछ हिस्सों

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

साथ लेकिन कुछ समय के लिए बातचीत करने देने के लिए जा रहा हूँ, मैं पहली बार इस समस्या को हल करने की जरूरत है।

स्रोत

2011-12-27 sawa

है एक ही बात करने के लिए एक jQuery प्लगइन: http: // fgnass.github.com/spin.js/, लेकिन आप इसे सीखने के अनुभव के रूप में करना चाहते हैं तो यह अच्छा है – asawilliams

@asawilliams मैं देखता हूं। लिंक के लिए धन्यवाद। मैं बाहरी पुस्तकालयों पर भरोसा नहीं करना चाहता था, लेकिन मैं इसे देख लूंगा। शायद मैं इसके प्रासंगिक हिस्सों को निकाल और पढ़ सकता हूं। लेकिन फिर भी, मैं जानना चाहता हूं कि उपरोक्त मेरा कोड इरादे से क्यों काम नहीं करता है। – sawa

@asawilliams आपके द्वारा लिंक किए गए कार्यान्वयन को jQuery के बिना काम करना प्रतीत होता है। मैं इसे गहराई से देखूंगा। – sawa

यहाँ भ्रम का एक सा नहीं है।

शून्य रेखा की चौड़ाई के लिए एक स्वीकार्य मूल्य नहीं है। Spec dictates कि अगर आप lineWidth = 0 कहते हैं कि यह एक नो-ओप होगा।

इसके अलावा आप lineWidth वहाँ का उपयोग नहीं कर रहे हैं क्योंकि आप को पथपाकर नहीं कर रहे हैं। fill() लाइन चौड़ाई को खाते में नहीं लेता है।

अन्य मुद्दे का सवाल है, तुम सब करने की है कॉल beginPath है! यहाँ देखें:

http://jsfiddle.net/JfcDL/

बस beginPath कॉल जोड़ने और आप अपने कोड के साथ इस मिलेगा:

enter image description here

आप गलत तरीके से क्या कर रहे थे कि हर साथ अब तक पूरे पथ बना दिया गया था नया stroke()। एक नया खोलने के लिए आपको beginPath पर कॉल करने की आवश्यकता है ताकि stroke केवल अंतिम भाग पर लागू हो और न ही सभी भागों को बनाया गया हो।

स्रोत

2011-12-28 00:18:43

यहां कई लोगों ने मदद के लिए धन्यवाद, मैं अंत में इस कोड है, जो आंदोलन के साथ पूरी तरह से काम करता है के साथ आया था:

<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>

यहाँ

स्रोत

2011-12-28 05:22:14 sawa

html5 कैनवास के साथ प्रतीक्षा कर रहा है एनीमेशन

उत्तर

संबंधित मुद्दे