Home > Article > Web Front-end > A small animation made in HTML5 has a strange problem._html/css_WEB-ITnose
A small animation made in HTML5 has a strange problem._html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:07:321064browse
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> 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~!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：A retractable menu. Click column A to expand it. Only column B can be retracted and hidden by clicking column A. How to hide A_html/css_WEB-ITnose by clicking A again?Next article：A retractable menu. Click column A to expand it. Only column B can be retracted and hidden by clicking column A. How to hide A_html/css_WEB-ITnose by clicking A again?