不能清除HTML/JavaScript的帆布

這裏是我的javascript代碼：不能清除HTML/JavaScript的帆布

canvas = document.getElementById("canvas"); 
context = canvas.getContext("2d"); 
width = canvas.width = window.innerWidth; 
height = canvas.height = window.innerHeight; 


particle = []; 
particleCount = 0, 
gravity = 0.3, 
colors = [ 
    '#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', 
    '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4CAF50', 
    '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800', 
    '#FF5722', '#795548' 
]; 


function drawparticles(){ 
     for(var i = 0; i < 250; i++){ 


particle.push({ 
    x : width/2, 
    y : height/2, 
    boxW : randomRange(5,15), 
    boxH : randomRange(5,15), 
    size : randomRange(2,6), 

    spikeran:randomRange(3,5), 

    velX :randomRange(-8,8), 
    velY :randomRange(-50,-10), 

    angle :convertToRadians(randomRange(0,360)), 
    color:colors[Math.floor(Math.random() * colors.length)], 
    anglespin:randomRange(-0.2,0.2), 

    draw : function(){ 


     context.save(); 
      context.translate(this.x,this.y); 
      context.rotate(this.angle); 
     context.fillStyle=this.color; 
     context.beginPath(); 
     // drawStar(0, 0, 5, this.boxW, this.boxH); 
    context.fillRect(this.boxW/2*-1,this.boxH/2*-1,this.boxW,this.boxH); 
     context.fill(); 
       context.closePath(); 
     context.restore(); 
     this.angle += this.anglespin; 
     this.velY*= 0.999; 
     this.velY += 0.3; 

     this.x += this.velX; 
     this.y += this.velY; 
      if(this.y < 0){ 
     this.velY *= -0.2; 
      this.velX *= 0.9; 
     }; 
     if(this.y > height){ 
     this.anglespin = 0; 
     this.y = height; 
     this.velY *= -0.2; 
      this.velX *= 0.9; 
     }; 
      if(this.x > width ||this.x< 0){ 

     this.velX *= -0.5; 
     }; 



    }, 




    }); 


    } 


} 



function drawScreen(){ 

for(var i = 0; i < particle.length; i++){ 
    particle[i].draw(); 

} 


} 



function update(){ 

    var fps = 120; 

    context.clearRect(0,0,width,height); 
    drawScreen(); 

    setTimeout(function() { 
     requestAnimationFrame(update); 
    }, 1000/fps); 
} 

update(); 

function clearparticles(content){ 
    content.clearRect(0, 0, canvas.width, canvas.height); 
} 

function randomRange(min, max){ 
    return min + Math.random() * (max - min); 
} 

function randomInt(min, max){ 
    return Math.floor(min + Math.random()* (max - min + 1)); 
} 

function convertToRadians(degree) { 
    return degree*(Math.PI/180); 
}

功能clearparticles是我試圖清除我的畫布上的HTML/JavaScript的顆粒。但是，這似乎並沒有工作。看來我得到以下錯誤：無法讀取undefined屬性'clearRect'

我想不出其他任何東西來使它工作。我究竟做錯了什麼？

編輯：這裏是HTML代碼（測試代碼）：

<style> 
    html, body { 
     padding:0; 
     margin:0; 
      width: 100%; 
      height: 100%; 
      cursor: default; text-align: center; 

      font-family: 'PT Sans', sans-serif; 
    } 

    canvas { 
         pointer-events:none; 
       position: absolute; 
       left:0; 
       top:0; 
       z-index:0; 
       border:0px solid #000; 
    } 
</style> 
     <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script> 

    </head> 
    <body> 
     <canvas id="canvas"></canvas> 
     <script language="javascript" type="text/javascript" src="confetti2.js"></script> 
    <button onclick="drawparticles()">Spawn</button> 
     <button onclick="clearparticles()">Clear</button> 

    </body> 

    </html>

來源

2015-11-17 Miles Collier

你不包括你調用clearparticles的代碼 –

告訴我們調用clearparticles（）方法的代碼。您可能沒有提供有效的畫布作爲該函數的參數。 – HaukurHaf

噢，抱歉，這只是一個簡單的測試： '<按鈕的onclick = 「clearparticles（）」>清除' 我調用主腳本'<按鈕的onclick = 「drawparticles（）」>派生'我把OP –

你的HTML代碼中包含

<button onclick="clearparticles()">Clear</button>

當你點擊這個按鈕，它調用的方法clearparticles() 。但這並不存在。它無法找到該功能。你有什麼是

function clearparticles(content){ 
    content.clearRect(0, 0, canvas.width, canvas.height); 
}

這個函數需要一個參數，但你不提供onclick事件的任何數據。您可以通過刪除「內容」參數來解決它。要清除矩形，你只需要打電話給你的繪圖上下文的clearRect(...)功能（詳細信息：MDN - CanvasRenderingContext2D）

既然你已經有一個上下文全局變量，

context = canvas.getContext("2d");

你可以簡單地使用下一個爲您解決問題

function clearparticles(){ 
    context.clearRect(0, 0, canvas.width, canvas.height); 
}

或者你當然可以提供在onclick屬性的參數。但這不是一個乾淨的解決方案。

來源

2015-11-17 23:59:43 KarelG

是的，我原來是這樣的。我再次使用它來加倍測試它。它刪除console.log中的所有錯誤，但它不起作用，在這裏我的測試網站：http://icarus.milescollier.com/index2.html –

我必須檢查您的代碼。顯然你正在使用'setTimeout（function（）{requestAnimationFrame（update）;}，1000/fps）;'它在數組中每隔一段時間繪製一個粒子。只需在clearparticles（）函數中添加一行：'particle = []'來清除內存。然後，在更新畫布時，不再需要每個粒子的繪製調用。 – KarelG

哦，我的，這是多麼的！謝謝你，從來沒有想過這樣做。它現在看起來很完美 - 即使它已經完全消失了，所以它現在淡入淡出。我愛你。 –

不能清除HTML/JavaScript的帆布

回答

相關問題