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

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

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

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

JavaScript

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

解決済

Javascriptとcanvasを使ってドラッグ&ドロップでアイコンを指定範囲内で自由に動かせるようにしたい

mamakokoko
mamakokoko

総合スコア1

canvas

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

JavaScript

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

1回答

0評価

1クリップ

149閲覧

投稿2022/06/20 11:11

Javascriptとcanvasを使ってドラッグ&ドロップで複数のアイコンを別々に指定範囲内で動かせるようなものを作成したいです。

下記のサイトを参考にして四角形をドラッグ&ドロップで動かせるようにしました。
https://itecnote.com/tecnote/javascript-drag-and-drop-multiple-objects-in-html5-canvas/

サッカーのフォーメーションを自分で作るような仕様にしたいです。
下の画像のように四角形は並べて、自由にドラッグ&ドロップで動かせるようにしたのですが、この四角形をアイコン画像に置き換えたいです。
イメージ説明

コードを書いてみたのですが、思ったように動かず、エラーが出ています

Javascript

window.onload=function(){ const path = require('path'); console.log(path); const board = document.getElementById("board"); const ctx=board.getContext("2d"); const chara = new Image(); chara.src="/images/uni.jpg"; chara.onload = ()=>{ ctx.drawImage(chara,0,0,100,100) var BB=board.getBoundingClientRect(); var offsetX=BB.left; var offsetY=BB.top; var WIDTH = board.width; var HEIGHT = board.height; var dragok = false; var startX; var startY; canvas.onmousedown = myDown; canvas.onmouseup = myUp; canvas.onmousemove = myMove; function clear() { ctx.clearRect(0, 0, WIDTH, HEIGHT); } function draw() { clear(); ctx.fillStyle = "#FAF7F8"; chara(0,0,WIDTH,HEIGHT); // redraw each rects in the rects[] array for(var i=0;i<charas.length;i++){ var r=charas[i]; ctx.fillStyle=r.fill; chara(r.x,r.y,r.width,r.height); console.log("い"); } } }; function myDown(e){ e.preventDefault(); e.stopPropagation(); var mx=parseInt(e.clientX-offsetX); var my=parseInt(e.clientY-offsetY); dragok=false; for(var i=0;i<charas.length;i++){ var r=charas[i]; if(mx>r.x && mx<r.x+r.width && my>r.y && my<r.y+r.height){ dragok=true; r.isDragging=true; } } startX=mx; startY=my; } function myUp(e){ e.preventDefault(); e.stopPropagation(); dragok = false; for(var i=0;i<charas.length;i++){ charas[i].isDragging=false; } } function myMove(e){ if (dragok){ e.preventDefault(); e.stopPropagation(); var mx=parseInt(e.clientX-offsetX); var my=parseInt(e.clientY-offsetY); var dx=mx-startX; var dy=my-startY; for(var i=0;i<charas.length;i++){ var r=charas[i]; if(r.isDragging){ r.x+=dx; r.y+=dy; } } draw(); startX=mx; startY=my; } } };

エラー内容は以下です。
uncaught ReferenceError: charas is not defined at HTMLCanvasElement.myUp(new.js:170:1)

Uncaught ReferenceError: dragok is not defined at HTMLCanvasElement.myMove (new.js:176:1)

現在はWebページにアイコン画像が一つだけ映っており、アイコンを動かそうとすると上記のエラーが出ます。

Javascriptを触り始めてから間もないため、解決方法に辿り着くまでの検索の仕方などもわかっておりません。

こちらに記載したコードのおかしな点がありましたらご教示いただけると幸いです。

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

canvas

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

JavaScript

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