HTML5 で作成された小さなアニメーションには奇妙な問題があります。_html/css

HTML5 で作成された小さなアニメーションには奇妙な問題があります。_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 12:07:32

オリジナル

1111 人が閲覧しました

HTML5を使ってボールが動くFlash風のアニメーションを作ったのですが、不思議な問題が発生しました… ソースコードは以下の通りです:

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

ログイン後にコピー

通常はボールが前後に飛び跳ねるのですが、上記はJavaScriptで, heightとwidthの2つの変数が定義されているのですが、本来はclearRectステートメントでこの2つの変数を使いたかったのですが、不要だと思ってコメントアウトしましたが、変数を定義しているこの2つのステートメントをコメントアウトするとボールが外れてしまいます。表示されます。跳ね返ることはありませんが、下に下がり続けます...キャンバスから出てしまうまで、、、、これは if ステートメントが役に立たないことと同じです。変数の定義とラウンドトリップには関係があるのでしょうか... HTML5を勉強したばかりなので、誰かアドバイスを求めたいです。

ディスカッションに返信（解決策）

if(qidian==0 || qidian== height-1){ // 現在の行の位置を決定し、エリア内で制御します
なぜならあなたの身長は変数 Before 定義されていない場合は、エラーが報告され、実行されません。 if (qidian==0 || qidian==200-1){ に変更することも可能です。この変数は使用していないためコメントアウトできます

うわー...とても素朴な質問ですが...不注意すぎて気づきませんでした。ありがとうございました〜！