कैनवास

Question

में डिस्प्ले अपडेट को कैसे बल देना है यदि मैं त्वरित उत्तराधिकार में कैनवास को बहुत आकर्षित करता हूं, उदा। एक संदर्भ में। एक लूप में भरें, ब्राउज़र तब तक प्रतीक्षा कर रहे हैं जब तक कि किसी भी ड्राइंग को प्रदर्शित करने से पहले लूप समाप्त हो गया हो (संभवतः डबल-बफरिंग के माध्यम से)

क्या ब्राउज़र को डिस्प्ले अपडेट करने के लिए मजबूर करने का कोई तरीका है, या तो स्पष्ट रूप से या प्रत्येक ड्रॉ ऑपरेशन के बाद निहित रूप से?

Answer 1

यह वास्तव में किसी भी डबल-बफरिंग के कारण नहीं है जिसे आप नतीजे नहीं देखते हैं, बल्कि इसलिए कि वेब ब्राउज़र में जावास्क्रिप्ट एकल-थ्रेडेड है। यदि आप इसी तरह जावास्क्रिप्ट में एक लूप बनाते हैं जो बार-बार myDiv.style.top = parseInt(myDiv.style.top) + 1 +"px"; जैसा कुछ करता है तो आप देखेंगे कि ब्राउजर में कुछ भी दिखाई नहीं देगा-यहां तक ​​कि कई सेकंड तक-जब तक आपकी जावास्क्रिप्ट निष्पादित नहीं हो जाती है।

परिवर्तन आकर्षित करने और स्क्रीन पर परिणाम देखने के लिए, आपको ब्राउज़र पर नियंत्रण प्राप्त करने के लिए setInterval या setTimeout का उपयोग करने की आवश्यकता है, लेकिन भविष्य में किसी बिंदु पर कोड चलाने के लिए कहें।

उदाहरण के लिए, एक नई यादृच्छिक, बेतरतीब ढंग से रंग का आयत कैनवास पर 15 बार एक दूसरे आकर्षित करने के लिए:

var canvas = document.getElementsByTagName('canvas')[0]; 
var ctx = canvas.getContext('2d'); 
setInterval(function(){ 
    ctx.clearRect(0,0,canvas.width,canvas.height); 
    var r=Math.random()*255, g=Math.random()*255, b=Math.random()*255; 
    ctx.fillStyle = 'rgb('+r+','+g+','+b+')'; 
    var w=Math.random()*canvas.width,  h=Math.random()*canvas.height; 
    var x=Math.random()*(canvas.width-w), y=Math.random()*(canvas.height-h); 
    ctx.fillRect(x,y,w,h); 
},1000/15);