clearRect काम नहीं कर रहा

Question

मैं गेम बनाने के लिए जावास्क्रिप्ट में एक पोंग गेम कर रहा हूं, और मैं इसे ऑब्जेक्ट उन्मुख बनाना चाहता हूं।

मुझे काम करने के लिए clearRect नहीं मिल रहा है। यह सब एक रेखा खींचता है जो लंबे समय तक बढ़ता है।

function Ball(){ 
    this.radius = 5; 
    this.Y = 20; 
    this.X = 25; 
    this.draw = function() { 
     ctx.arc(this.X, this.Y, this.radius, 0, Math.PI*2, true); 
     ctx.fillStyle = '#00ff00'; 
     ctx.fill(); 
    }; 
} 

var ball = new Ball(); 

function draw(){ 
    player.draw(); 
    ball.draw(); 
} 

function update(){ 
    ctx.clearRect(0, 0, 800, 400); 
    draw(); 
    ball.X++; 
} 

मैं draw() और ball.draw() कार्यों में ctx.clearRect हिस्सा डाल करने की कोशिश की है और यह काम नहीं करता: यहाँ प्रासंगिक कोड है। मैंने सफेद के साथ fillRect भी कोशिश की लेकिन यह वही परिणाम देता है। मैं इसे कैसे ठीक कर सकता हूं?

Answer 1

आपकी वास्तविक समस्या यह है कि आप अपने मंडल के पथ को बंद नहीं कर रहे हैं।

सर्कल खींचने से पहले ctx.beginPath() जोड़ें।

jsFiddle।

इसके अलावा

, कुछ सुझाव ...

• आपका संपत्ति खुद को (उनके draw() विधि) ड्राइंग के लिए जिम्मेदार नहीं होना चाहिए। इसके बजाय, शायद उनके दृश्य गुणों को परिभाषित करें (क्या यह एक सर्कल है? त्रिज्या?) और अपने मुख्य रेंडर फ़ंक्शन को canvas विशिष्ट ड्राइंग को संभालने दें (यह भी लाभ है कि आप नियमित रूप से डॉम तत्वों या वेबजीएल को आसानी से ट्रैक के नीचे अपने रेंडरर को स्विच कर सकते हैं) ।
• setInterval() के बजाय, requestAnimationFrame() का उपयोग करें। इस समय समर्थन इतना अच्छा नहीं है कि आप setInterval() या रिकर्सिव setTimeout() पैटर्न के साथ अपनी कार्यक्षमता को झुकाएं।
• आपका clearRect()canvas तत्व से आयामों को पारित किया जाना चाहिए (या उन्हें कहीं परिभाषित किया गया है)। उन्हें अपने प्रतिपादन कार्यों में शामिल करना जादू संख्या जैसा है और ट्रैक के नीचे एक रखरखाव समस्या का कारण बन सकता है।