I used HTML5 to make a flash-like animation of a small ball moving, but I encountered a strange problem... The source code is as follows:
<!DOCTYPE html><head><meta charset=utf-8><title>瞎玩唄</title><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script></head><body><canvas id="canvas2" width="400" height="200"></canvas><script type="text/javascript">var c=document.getElementById("canvas2");var c2=c.getContext("2d");var width = 400;var height = 200; var qidian=0; //設(shè)置線條起點(diǎn) var exp=1; //設(shè)置線條每次移動(dòng)像 c2.strokeStyle = "rgba(255,0,0,1)"; function jump(){c2.clearRect(0,0,400,200)c2.fillStyle="FF0000";c2.beginPath();c2.arc(180,qidian,20,0,Math.PI*2,1); c2.closePath();c2.fill(); qidian=qidian+exp; //起點(diǎn)+活動(dòng)像素位置 if(qidian==0 || qidian==height-1){ //判斷當(dāng)前線的位置,控制在區(qū)域內(nèi) exp=exp*-1; //乘以負(fù)一用來調(diào)整線路方向 } }</script><input onclick="interval=setInterval(jump,1);" value="開始" type="button"/><input onclick="clearInterval(interval);"value="停止" type="button"/></body></html>
Under normal circumstances, the ball It jumps back and forth, but in the above javascript, two variables, height and width, are defined. I originally wanted to use these two variables in the clearRect statement, but I thought it was unnecessary, so I commented it out, but, these two sentences If the statement that defines the variable is commented out, the ball will not bounce back, but will keep going down... until it walks out of the canvas,,,, which is equivalent to the if statement being useless. Is there any connection between defining a variable and round-trip... I just learned HTML5, and I hope someone can give me some advice.
Reply to discussion (solution)
if(qidian==0 || qidian== height-1){ // Determine the position of the current line , controlled within the area
Because your height is a variable. If it is not defined before, this will report an error and will not be executed. Change it to if (qidian==0 || qidian==200-1){ It is also possible var width = 400; This can be commented out because you didn't use this variable
Wow...a very simple question...I didn't notice it, it was too careless. Thank you very much~!