HTML5畫布-運動圈

Question

我在文本編輯器上編寫了以下html代碼：

 window.onload = function() { var canvasC = document.getElementById("canvasCircle"); var contextC = canvasC.getContext("2d"); var canvasBG = document.getElementById("canvasBackground"); var contextBG = canvasBG.getContext("2d"); var xPos = 50; var yPos = canvasC.height / 2; var radius = 40; var endXPos = canvasC.width - 75; var change = 10; var startAngle = (Math.PI / 180) * 0; var interval = 80; var endAngle = (Math.PI / 180) * 360; contextBG.fillStyle = "silver"; contextBG.fillRect(0, 0, canvasBG.width, canvasBG.height); var intervalID = setInterval function drawCircle() { contextC.clearRect(0, 0, canvasC.width, canvasC.height); contextC.strokeStyle = "green"; contextC.lineWidth = 4; contextC.shadowOffsetX = 3; contextC.shadowOffsetY = 3; contextC.shadowBlur = 5; contextC.shadowColor = "grey"; xPos += change; if (xPos > endXPos) { clearInterval(intervalID) }; contextC.beginPath(); contextC.arc(xPos, yPos, radius, startAngle, endAngle, true); contextC.stroke(); } } 

 <div> <canvas id="canvasCircle" width="400" height="125" style="border:2px solid black; position:absolute; left:auto; top:auto; z-index: 2"> Your browser doesn't currently support HTML5 Canvas. </canvas> <canvas id="canvasBackground" width="400" height="125" style="border:2px solid black; position:absolute; left:auto; top:auto; z-index: 1"> Your browser doesn't currently support HTML5 Canvas. </canvas> </div> 

我繪制的代碼應該顯示一個從左到右移動的圓，但是由於某種原因，只保留了背景。
有人可以告訴我我做錯了什么嗎，請謝謝。

Answer 1

定義函數drawCircle()您忘記了對其進行調用，並且為了移動圓環，必須使用setInterval來有爭議地調用此函數
添加setInterval(drawCircle, 1000); 在腳本中的function drawCircle() {...}之后。