當我清除畫布時，“ canvas.clearRect不是函數”

Question

我正在嘗試在HTML5畫布上繪制一個圓並四處移動。

我寫了這個Javascript代碼：

 var a = 0; function draw() { var c = document.getElementById("game"); var ctx = c.getContext("2d"); ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); ctx.arc(45+a, 45, 40, 0, 2 * Math.PI); ctx.stroke(); a++; } var t=setInterval(draw,1000); 

 <canvas id="game" width="640" height="480"></canvas> 

當我嘗試執行它時，在控制台中出現此錯誤：

TypeError：canvas.clearRect不是函數

我該如何解決？

謝謝。

Answer 1

在clearRect方法中，因為canvas是undefined ， canvas.width和canvas.height將引發錯誤。 您應該傳遞有效的對象。

 var a = 0; function draw() { var canvas = document.getElementById("game"); var ctx = canvas.getContext("2d"); ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); ctx.arc(45 + a, 45, 40, 0, 2 * Math.PI); ctx.stroke(); a++; } var t = setInterval(draw, 1000); 

 <canvas id="game" width="640" height="480"></canvas>