JavaScriptでのアニメーション

解決済

質問者：Mm08aa
質問日時：2013/12/11 23:34
回答数：2件

JavaScriptで書いたアニメーションをHTML5上で動かそうとしているのですが、うまくいきません。いろいろなサイトで調べましたが原因がわからなかったのでどなたか解決法を教えてください。

任意の値X,Yを入力、これを始点の座標としてそこからランダムな色の円が動くというアニメーションを作りたいです。しかし、X,Yの値を任意に入力させようとするとアニメーションそのものが動かなくなってしまいます。座標をあらかじめ指定しておくとうまく動くのですが……。
任意の値を入れてもきちんと動くように直したいのですが、方法がわかりません。どなたかご教授願います。

以下コード。これより上と下は省略してあります。
<script type="text/javascript">
var speedX = 3.0;
　 var speedY = 4.0;
var locX = parseInt(document.getElementById("ｘ").value);
var locY = parseInt(document.getElementById("y").value);
　//locX,locYを予め指定しておくとその位置からきちんとアニメーションが動くが、上のようにすると動かなくなる
var ctx;

function anim(){
var canvas = document.getElementById('mycanvas');
if (canvas.getContext){
ctx = canvas.getContext('2d');
setInterval(draw, 60);
}
}

function draw(){
ctx.globalCompositeOperation = "source-over";
var r = parseInt(Math.random() * 255);
var g = parseInt(Math.random() * 255);
var b = parseInt(Math.random() * 255);
var alpha = Math.random();
var rgba = "rgba("+r+", "+g+", "+b+", "+alpha+")";
ctx.fillStyle = rgba;
ctx.fill();
ctx.globalCompositeOperation = "lighter";

locX += speedX;
locY += speedY;

if(locX < 0 || locX > 800){
speedX *= -1;
}

if(locY < 0 || locY > 600){
speedY *= -1;
}

ctx.beginPath();
ctx.fillStyle = rgba;
ctx.arc(locX, locY, 5, 0, Math.PI*2.0, true);
ctx.fill();
}
</script>
</head>
<body>
<p><label>X </label><input id="x"> <label>Y </label><input id="y"> <button type=button onclick="anim();">start</button></p>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： Picosoft
回答日時：2013/12/12 00:29

想定する動作の流れは

　ユーザが初期値を入力して、ボタンをクリック
　　　↓
　ユーザの入力した初期値をlocX, locYに入れる
　　　↓
　アニメーション開始
という感じですが、
今のコードは2番目の「ユーザの入力した初期値をlocX, locYに入れる」という処理が抜けています。

anim関数の中でlocX, locYの値を設定してください。

この回答への補足

2番目の処理が抜けているというのは理解しました。
anim関数の中でlocX,locYの値を設定するというのを以下のようにやってみましたが、うまくいきませんでした。
function anim(){
var canvas = document.getElementById('mycanvas');
if (canvas.getContext){
ctx = canvas.getContext('2d');
setInterval(draw, 60);
}
locX = document.getElementById("x").value);
locY = document.getElementById("y").value);
}
（anim関数以外の部分はいじっていません）

値を設定する、というのを上記のように書いたのですがうまくいきませんでした（見当違いのことを書いているかもしれません、すみません）。anim関数内をどのように書き直せばいいのでしょうか…。何度もお尋ねして申し訳ありません。

補足日時：2013/12/13 00:23

通報する