JavaScriptでのアニメーション
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>
お礼
速度変更できました。本当に有難うございました。