ホームページ > 記事 > ウェブフロントエンド > HTML5 で作成された小さなアニメーションには奇妙な問題があります。_html/css_WEB-ITnose
HTML5 で作成された小さなアニメーションには奇妙な問題があります。_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:07:321064ブラウズ
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){ に変更することも可能です。この変数は使用していないためコメントアウトできます
うわー...とても素朴な質問ですが...不注意すぎて気づきませんでした。ありがとうございました〜！
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。