JavaScriptでのアニメーション
- JavaScriptで書いたアニメーションをHTML5上で動かす方法を教えてください。
- 特定の座標を指定せずに任意の値でアニメーションを動かす方法を教えてください。
- 以下のコードを使用していますが、座標を任意に入力するとアニメーションが動かなくなります。対処方法を教えてください。
- ベストアンサー
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>
- Mm08aa
- お礼率0% (0/4)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
想定する動作の流れは ユーザが初期値を入力して、ボタンをクリック ↓ ユーザの入力した初期値をlocX, locYに入れる ↓ アニメーション開始 という感じですが、 今のコードは2番目の「ユーザの入力した初期値をlocX, locYに入れる」という処理が抜けています。 anim関数の中でlocX, locYの値を設定してください。
その他の回答 (1)
- Picosoft
- ベストアンサー率70% (274/391)
惜しい……！ anim関数内のsetInterval(draw, 60);でアニメーションが開始されます。 なので、setIntervalを呼ぶ前に初期値を設定してください。
関連するQ&A
- JavaScript/HTML5での図形の描写
canvasを使って図形の描写をするコードを書いています。 javascript初心者なりに考え、調べたのですがどうしてもわからなかったのでどなたか教えてください。 「入力された値を半径とした円をcanvas内のランダムな位置に、ランダムな色で複数描写する」という風にしたいのです。値は好きなだけ入れれるようにしてあります。現段階でランダムな位置に描写することはできるのですが、黒縁の白い円しか描写できません。「ランダムに彩色する」部分をどのように記述したらよいのかご教授願います。 【以下書いたコード】 function draw() { var canvas = document.getElementById('mycanvas'); var ctx = canvas.getContext('2d'); var r = parseInt(document.getElementById("radius").value); ctx.beginPath(); var drawPointX = Math.floor( Math.random() * 1200 ) + 1; var drawPointY = Math.floor( Math.random() * 600 ) + 1; ctx.arc( drawPointX, drawPointY, r, 0, Math.PI*2, true ); //ランダムな色を生成・彩色する 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.stroke(); }
- ベストアンサー
- JavaScript
- javascript 配列について
HTML5のcanvasにjsで描画する場合、 下記のように複数の図形を描く場合、 配列を用いて表記するにはどのようにすればよろしいでしょうか。 なお、図形の数は決まっていない、また、x,y,width,heightに規則性はないものとします。 ctx.fillStyle = "rgba(0,0,0,1)"; ctx.fillRect(20,10,10,10); ctx.fillStyle = "rgba(0,0,0,1)"; ctx.fillRect(30,10,10,10); ctx.fillStyle = "rgba(64,64,64,1)"; ctx.fillRect(10,20,10,10); ctx.fillStyle = "rgba(64,64,64,1)"; ctx.fillRect(40,20,10,10); … 以上、ご教授いただきたく何卒よろしくお願い致します。
- ベストアンサー
- JavaScript
- 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>
- 締切済み
- JavaScript
- JavaScriptについて
本を読みながら勉強しているのですが解説が乗っていなくてわからない部分があるので教えてください <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale=1.0,maximum-scale=3.0"> <script src="plugins/plugin-loader.js"></script> <link rel="stylesheet" href="plugins/plugin-loader.css"> </head> <body> <canvas id="canvas" width="300" height="300"></canvas> <script> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); //ランダムに５０個多角形の表示 for (var i = 0; i < 50; i++) { randomDraw(); } //指定範囲のランダムな整数を返す関数 function randomI(nFrom,nTo) { var f = nTo - nFrom + 1; return Math.floor(Math.random() * f) + nFrom; } //ランダムに多角形を描画する関数 function randomDraw() { //パス指定 ctx.beginPath(); //点をランダムに決定 var n = randomI(2,7); ctx.moveTo(randomI(0,canvas.width),randomI(0,canvas.hright)); for (var i = 0; i < n; i++) { ctx.lineTo(randomI(0,canvas.width),randomI(0,canvas.height)); } ctx.closePath(); //描画 ctx.fillStyle = "#" + randomI(0,0xFFFFFF).toString(16); ctx.fill(); } </script> </body> </html> というコードでランダムに50個多角形を描画するというものです function randomI(nFrom,nTo) { var f = nTo - nFrom + 1; return Math.floor(Math.random() * f) + nFrom; ここのrandomIとnToとnFromというのは変数名ですか？これはいったい何者ですか？ var n = randomI(2,7); ここの数字を変更すると何かが変わるのですがうまく言葉にできません 何がどう変わるのか教えてください
- ベストアンサー
- JavaScript
- javascriptの打ちミスしてる所を知りたい。
参考書の通り打ちました。参考書では、蛇を上下左右キーで操作し、餌を食べさせるゲームと書いておりましたが、灰色のイメージが出るだけで、蛇っぽいのは出ません。 たぶんどっかでタイプミスしてると思うのですが、どこだかわかりません。 教えてください。 <!DOCTYPE html> <html> <head> <title>SnakeBite</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <script type="text/javascript"> var W,H,S=20; var snake=[],foods=[]; var keyCode=0; var point=0; var timer=NaN; var ctx; function Point(x,y){ this.x=x; this.y=y; } function init(){ var canvas = document.getElementById('field'); W=canvas.width/S; H=canvas.height/S; ctx =canvas.getContext('2d'); ctx.font ="20px sans-serif"; snake.push(new Point(W/2,H/2)); for(var i=0; i<10;i++){ addFood(); } timer=setInterval("tick()",200); window.onkeydown =keydown; } function addFood(){ while(true){ var x =Math.floor(Math.random()*W); var y =Math.floor(Math.random()*H); if(isHit(foods,x,y)|| isHit(snake.x,y)){ continue; } foods.push(new point(x,y)); break; } function isHit(data,x,y){ for(var i=0;i<data.lenght;i++){ if(data[i].x==x && data[i].y==y){ return true; } } return false; } function moveFood(x,y){ foods =foods.filter(function(p){ return(p.x !=x || p.y !=y); }); addFood(); } function tick(){ var x=snake[0].x; var y=snake[0].y; switch(keyCode){ case 37:x--;break; case 38:y--;break; case 39:x++;break; case 40:y++;break; defaule:paint(); return; } if(isHit(snake,x,y) || x<0 ||x>=W || y<0||y>=H) { clearInterval(timer); paint(); return; } snake.unshift(new Point(x,y)); if(isHit(foods,x,y)){ point+=10; moveFood(x,y); }else{ snake.pop(); } paint(); } function paint(){ ctx.clearRect(0,0,W*S,H*S); ctx.fillStyle="rgb(256,0,0)"; ctx.fillText(point,S,S*2); ctx.fillStyle="rgb(0,0,255)"; foods.forEach(function(p){ ctx.fillText("+",p.x*S,(p.y+1)*S); }); snake.forEach(function(p){ ctx.fillText("*",p.x*S,(p.y+1)*S); }); } function keydown(event){ keyCode=event.keyCode; } </script> </head> <body onload="init()"> <canvas id="field" width="400" height="400" style="background:#cccccc"> </canvas> </body> </html>
- ベストアンサー
- JavaScript
- javascriptのタイプミス
javascript初心者です。以下のコードでどこにミスがあるのか 解りません。どこにあるのでしょうか？ このソースをエディタに 貼ると見やすくなると思います。 <!DOCTYPE html> <html> <head> <title>SnakeBite</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <script type="text/javascript"> var W, H, S = 20; var snake = [ ], foods = [ ]; var keyCode = 0; var point = 0; var timer = NaN; var ctx; // pointオブジェクト function Point(x,y) { this.x = x; this.y = y; } //初期関数 function init() { var canvas = document.getElementById('field'); W = canvas.width / S; H = canvas.height / S; ctx = canvas.getContext('2d'); ctx.font = "20px sans-serif"; //蚊の初期化 snake.push(new Point(W / 2, H / 2)); //餌の初期化 for (var i = 0 ; i < 10 ; i++) { addFood(); } timer = setInterval("tick()", 200); window.onkeydown = keydown; } //餌の追加 function addFood() { while (true) { var x = Math.floor(Math.random() * W); var y = Math.floor(Math.random() * H); if (isHit(foods, x, y) || isHit(snake, x, y)) { continue; } foods.push(new Point(x, y)); break; } } //衝突判定 function isHit(data, x, y) { for (var i = 0 ; i < data.length ; i++) { if (data[i].x==x && data[i].y==Y) { return true; } } return false; } function moveFood(x, y) { foods =foods. filter(function (p){return (p.x !=x || p.y !=y);}); addFood(); } function tick() { var x = snake[0].x; var y = snake[0].y; switch (keyCode) { case 37: x--; break; //左 case 38: y--; break; //上 case 39: x++; break; //右 case 40: y++; break; //下 default: paint(); return; } //自分or壁に衝突 if(isHit(snake,x,y) || x<0 || x>=W || y<0 || y>=H ) clearInterval(timer); paint(); return; } //頭を先頭に追加 snake.unshift(new Point(x,y)); if(isHit(foods, x, y)) { point +=10; //餌を食べた moveFood(x,y); }else{ snake.pop(); //食べていない→しっぽを解除 } paint(); } function paint() { ctx.clearRect(0,0,W * S, H * S); ctx.fillStyle = "rgb(256,0,0)"; ctx.fillText(point, S, S * 2); ctx.fillStyle = "rgb(0,0,255)"; foods.forEach(function (p) { ctx.fillText("+", p.x * S, (p.y + 1) * S);}); snake.forEach(function (p) { ctx.fillText("*", p.x * S, (p.y + 1) * S); }); } function keydown(event) { keyCode = event.keyCode; } </script> </head> <body onload="init()"> <canvas id="field" width="400" height="400" style="background:#cccccc"> </canvas> </body> </html>
- ベストアンサー
- JavaScript
- removeChild()についてご教授願います。
AS3.0の初心者です。 Stratボタン、Stopボタンで以下のスクリプトで表示と非表示を繰返ししたいのですが、 Stopボタンで、単にremoveChild();にしますと、 「#2025: 指定した DisplayObject は呼び出し元の子でなければなりません。」 とエラーとなります。 色々と調べてみたのですが、よく判判りません。 Stopボタンの記述をどの様にすればよいのでしょうか？ 初歩的質問で大変恐縮ですが、どうかご教授お願い致します。 [メインスクリプト] var stageH = stage.stageHeight; var stageW = stage.stageWidth; //Stratボタン start.addEventListener(MouseEvent.MOUSE_DOWN,gene); function gene(e:Event):void { for (var i = 0; i < 20; i++) { var mc:Candy = new Candy(); mc.x = Math.random()*stageW + 10; mc.y = Math.random()*stageH + 10; addChild(mc); } } //Stopボタン stop.addEventListener(MouseEvent.MOUSE_DOWN,stp); function stp(e:Event):void { removeChild(mc); この部分がよく判らないのですが、 どの様に記述したら良いのでしょうか？ } --------------------------------------- [mc のスクリプト] var mcH:int = this.height; var mcW:int = this.width; var stageH = stage.stageHeight; var stageW = stage.stageWidth; var speedY:uint = Math.random() * 5 + 5; var speedX:uint = Math.random() * 2; addEventListener(Event.ENTER_FRAME,loop); function loop(Event):void { y += speedY; x += speedX; if ( y > stageH ) { y = - mcH; } if ( x > stageW ) { x = - mcW; } } -----------------------------------------
- ベストアンサー
- Flash
- html5canvasの文字枠のずれ
html5のcanvasで、枠付きの文字列を描画しようとしたら、表示がおかしくなったのですが、理由がわかりません。ブラウザはchromeです。 一部のフォントとサイズのときだけ起きるのですが、それ以外で作れば問題ないのでしょうか。 <canvas id="canvas" width="500" height="500"></canvas> <script type="text/javascript"> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext('2d'); ctx.lineWidth=2; ctx.font = "bold 22px 'ＭＳ Ｐ明朝'" ctx.strokeStyle = 'rgba(255, 0, 0, 1)'; ctx.fillStyle = 'rgba(0, 0, 0, 1)'; ctx.strokeText("aa0.3", 10, 25); ctx.fillText("aa0.3", 10, 25); </script>
- ベストアンサー
- JavaScript
- ボタンをロールオーバーした時にMCを複製したい
はじめまして、よろしくお願いします。 表題の通りですが、 ボタンをロールオーバーした時にMCを複製したいのですが、やり方がわかりません。 body（←ボタン名）を押した時に snow（←複製されるMC名）を噴射するような形にしたいです。 フレーム1に書かれたスクリプト------------------- for (count = 1;count<30;count ++) { snow.duplicateMovieClip("snow" + count , count ); } ----------------------------------------------- 複製されるMC（snow）---------------------------------- onClipEvent(load){ xposition = _root.body._x+75; yposition = _root.body._y+75; scale = Math.random()*30+10; speedx = 12-(scale+Math.random()*30+1)/5; speedy = 12-scale/5; this._x = xposition; this._y = yposition; this._xscale = scale; this._yscale = scale; } onClipEvent (enterFrame){ if(this._y>400){ this._y=yposition; this._x=_root.body._x+75; this._alpha = 100; } this._x+=speedx; this._y+=speedy; this._alpha = this._alpha-5; } ----------------------------------------------- 早急に解決しなくてはならなく、困っています。 よろしくお願いします。
- ベストアンサー
- Flash
- JavaScriptを使ってXMLにタグを打ち込みたいんですが。。
プログラミング初心者で申し訳ありません。 JavaScriptを使っているのですが、ボタンを押して、<math>～</math>の中に数式のタグを入力しようとしています。 現状のソースですが、 ファイル名：sample.xhtml ～ <math id="math" xmlns="http://www.w3.org/1998/Math/MathML"> #数式のタグの入力位置 </math> <script type="text/javascript"> function mul1(){ var info = document.getElementById("math"); var txt1 = document.createTextNode("<mi>"); var txt2 = document.createTextNode("x"); var txt3 = document.createTextNode("</mi>"); info.appendChild(txt1); info.appendChild(txt2); info.appendChild(txt3); } </script> <form> <input type = "button" value="x" onclick ="mul1()" /> </form> ～ となっています。 理想は <math id="math" xmlns="http://www.w3.org/1998/Math/MathML"> <mi>x</mi> </math> ボタンクリック後こういう感じでタグを挿入したいと考えています。 function mul1(){ var info = document.getElementById("math"); var element1 = document.createElement("mi"); var element2 = document.createElement("/mi"); var txt = document.createTextNode("x"); info.appendChild(element1); info.appendChild(txt); info.appendChild(element2); } 要素追加と思いcreateElement()で検証してみたんですが、結果はなにも表示されませんでした。 言葉不十分で申し訳ありませんが、解決法教えていただけませんか？ よろしくお願いいたします。
- ベストアンサー
- JavaScript
補足
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関数内をどのように書き直せばいいのでしょうか…。何度もお尋ねして申し訳ありません。