• 締切済み

javascriptで困ってます

下記のスクリプトでcanvas上で四角を動かすアニメーションをさせたのですが、andoroidに標準のブラウザで見ると、最初の位置に四角が残ってしまいます。この残ってしまう四角を消したたいのですが、どのようにしたらよいのでしょうか、教えてください。よろしくお願いします。 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>canvasアニメーション</title> <script type="text/javascript"> // <![CDATA[ window.onload = function(){ var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "#ffffff"; var point = {x:0,y:0}; var par = {x:3,y:3}; var timer; var delay = 100; function draw(x,y){ ctx.clearRect(0,0,600,600); ctx.fillRect(x,y,50,50); } var loop = function(){ point.x = point.x + par.x; point.y = point.y + par.y; draw(point.x,point.y); clearTimeout(timer); timer = setTimeout(loop,delay); } loop(); } // ]]> </script> <style type="text/css" media="screen"> /* <![CDATA[ */ body{ background-color:#000000; } /* ]]> */ </style> </head> <body> <canvas id="canvas" width="600" height="600"></canvas> </body> </html>

みんなの回答

回答No.1

AndroidOSのバージョンはいくつですか? 4.2ではおそらく期待通りの動作をしていました。 古いバージョンではCSSやJavaScriptのサポート状況が非常に悪いので、動かない可能性もあります。 Chromeをインストールするか、AndroidOSをアップデートして最新のブラウザにしてみてください。 それが無理なら、その機種を使われている方には諦めてもらうしか、canvasを使わない別の方法で作るか、ということになると思います。 (古いAndroidはFlashをサポートしていますので、Flash/ActionScriptで作り、ブラウザ判別でActionScript版とJavaScript版を切り替えるというのも一つの方法です。)

dkong
質問者

お礼

ありがとうございました。アップデートしてみます。

すると、全ての回答が全文表示されます。

専門家に質問してみよう