A small animation made in HTML5 has a strange problem._html/css

A small animation made in HTML5 has a strange problem._html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:07:32

Original

1110 people have browsed it

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;		//设置线条起点 var exp=1;			//设置线条每次移动像 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;					//起点+活动像素位置	 if(qidian==0 || qidian==height-1){ //判断当前线的位置，控制在区域内	   exp=exp*-1; //乘以负一用来调整线路方向	 }	 	}</script><input onclick="interval=setInterval(jump,1);" value="开始" type="button"/><input  onclick="clearInterval(interval);"value="停止" type="button"/></body></html>

Copy after login

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~!