質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

配列

配列は、各データの要素(値または変数)が連続的に並べられたデータ構造です。各配列は添え字(INDEX)で識別されています。

受付中

requestAnimationFrameについて

yamagutikaito
yamagutikaito

総合スコア0

canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

配列

配列は、各データの要素(値または変数)が連続的に並べられたデータ構造です。各配列は添え字(INDEX)で識別されています。

1回答

0評価

0クリップ

813閲覧

投稿2019/09/13 14:47

前提・実現したいこと

丸の図形をタッチイベントで動かした通りに動かすアニメーションを作りたいです。(開始ボタンを押すと動く)

発生している問題・エラーメッセージ

requestAnimationFrameでアニメーションを作りたいのですが、難しくてできません。
touchMoveEventの座標を配列に納めました。
その座標の通りに動くよう操作できればいいのですが、、

該当のソースコード

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, height=device-height"> <link rel="stylesheet" href="css/style.css"> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <style> .draggable-elem{ width:30px; height:30px; border-radius:50%; background-color:blue; } .draggable-elem2{ width:30px; height:30px; border-radius:50%; background-color:red; } </style> <body onLoad="init()"> <div id="canvas-container"> <canvas id="canvas" style="background-color:green;"width="100%" height="100%"></canvas> <div class="draggable-elem"></div> <script> //画面サイズ var theCanvas = document.getElementById('canvas'); function canvas_resize(){ var windowInnerWidth=window.innerWidth; var windowInnerHeight=window.innerHeight/1.2; theCanvas.setAttribute('width',windowInnerWidth); theCanvas.setAttribute('height',windowInnerHeight); } window.addEventListener('resize',canvas_resize,false); canvas_resize(); //サッカーコート var container = document.getElementById("canvas-container"); var canvas = document.getElementById("canvas"); var context = canvas.getContext('2d'); //親要素のサイズをCanvasに指定 canvas.width = container.clientWidth; canvas.height = container.clientHeight; function init() { // オブジェクトを描画 drawRect(); } function drawRect() { //色を指定する context.strokeStyle = 'rgb(255,255,255)'; //枠線の色は白 context.fillStyle = 'rgb(00,00,255)'; context.strokeRect(canvas.width/2.5, canvas.height/13.5,canvas.width/4.5, canvas.height/18.5); context.strokeRect(canvas.width/3.65, canvas.height/13.4,canvas.width/2.1, canvas.height/9); context.strokeRect(canvas.width/2.155, canvas.height/16.5,canvas.width/11, canvas.height/70); context.strokeRect(canvas.width/11, canvas.height/2.142,canvas.width/1.17, 0); context.strokeRect(canvas.width/11, canvas.height/13.5,canvas.width/1.17, canvas.height/1.241); context.strokeRect(canvas.width/3.65, canvas.height/1.3,canvas.width/2.1, canvas.height/9); context.strokeRect(canvas.width/2.5, canvas.height/1.195,canvas.width/4.5, canvas.height/23); context.strokeRect(canvas.width/2.155, canvas.height/1.135,canvas.width/11, canvas.height/70); //円弧 context.beginPath(); context.arc(canvas.width/1.94, canvas.height/5.4,canvas.width/10,Math.PI*1,Math.PI*2,true); context.stroke(); context.closePath(); context.beginPath(); context.arc(canvas.width/1.94, canvas.height/1.3,canvas.width/10,Math.PI*1,Math.PI*2,false); context.stroke(); context.closePath(); //円 context.beginPath(); context.arc(canvas.width/1.95, canvas.height/2.13,canvas.width/7,0,Math.PI*2,true); context.stroke(); context.closePath(); } //タッチ function touchStartEvent(event) { // タッチによる画面スクロールを止める event.preventDefault(); } var positionAry = []; /* グローバル変数として宣言 */ function touchMoveEvent(event) { event.preventDefault(); // ドラッグ中のアイテムをカーソルの位置に追従 var draggedElem = event.target; var touch = event.changedTouches[0]; var positionMap = {}; event.target.style.position = "fixed"; positionMap.x = event.target.styleLeft; // 左から何pxか positionMap.y = event.target.styleTop; // 上から何pxか event.target.style.top = (touch.pageY - window.pageYOffset - draggedElem.offsetHeight / 2) + "px"; event.target.style.left = (touch.pageX - window.pageXOffset - draggedElem.offsetWidth / 2) + "px"; positionAry.push(positionMap); } // ドラッグ可能アイテムへのタッチイベントの設定 var draggableItems = $(".draggable-elem"); for (var i = 0; i < draggableItems.length; ++i) { var item = draggableItems[i]; item.addEventListener('touchstart', touchStartEvent, false); item.addEventListener('touchmove', touchMoveEvent, false); item.addEventListener('touchend', touchEndEvent, false); } // ドラッグ可能アイテムへのタッチイベントの設定 var draggableItems = $(".draggable-elem2"); for (var i = 0; i < draggableItems.length; ++i) { var item = draggableItems[i]; item.addEventListener('touchstart', touchStartEvent, false); item.addEventListener('touchmove', touchMoveEvent, false); item.addEventListener('touchend', touchEndEvent, false); } </script> </body> </html>

試したこと

ここに問題に対して試したことを記載してください。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

Lhankor_Mhy
Lhankor_Mhy

2019/09/14 00:46

過去の質問が解決していないようですが、なにかポリシーがあって放置しているのですか?
yamagutikaito
yamagutikaito

2019/09/14 06:03

すみません、使い方がよく分かっておらず、、 以前は参考にさせていただきました。ありがとうございます。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

配列

配列は、各データの要素(値または変数)が連続的に並べられたデータ構造です。各配列は添え字(INDEX)で識別されています。