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

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

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

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

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

9665閲覧

canvas上でクリックした位置にtextareaを出現させたい

hiroakikoura

総合スコア13

canvas

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

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2018/11/28 08:15

やりたいこと

canvas上でクリックした際、クリック位置のマウス座標を取得し、その座標にtextareaを出現させるようなことを実現したいです。

やってみたこと

テキストボックスの内容を取得し、canvas上のクリックした位置に取得した内容を表示させるというものを作ってみました
ちなみに以下のコードになります。

html

1<html> 2<head> 3<link rel="stylesheet" href="canvas.css" type="text/css"> 4<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 5<script type="text/javascript" src="canvas.js"></script> 6</head> 7<p id="tool"> 8<canvas id="axisCanvas" style="width: 700px; height: 800px; margin: 0 auto;position: absolute; left: 500px; top: 200px"></canvas> 9Text: <input id="text" name="text" type="text" value="Example"> | 10 Size: <input id="size" name="size" type="text" size="3" value="14"> | 11 Color: <input id="color" name="color" type="text" size="7" value="#000"> 12

JavaScript

1var canvas; // canvas要素(HTMLCanvasElement) 2var ctx; // 2Dコンテキスト(CanvasRenderingContext2D) 3var canvasW = 700; // canvas要素の横幅(px) 4var canvasH = 800; // canvas要素の縦幅(px) 5var mouseX; // 最後にクリックされた位置のx座標 6var mouseY; // 最後にクリックされた位置のy座標 7var text, size, color; 8window.onload = function() { 9 // canvas要素を取得し、サイズ設定 10 canvas = document.getElementById('axisCanvas'); 11 canvas.width = canvasW; 12 canvas.height = canvasH; 13 14 // 描画のために2Dコンテキスト取得 15 ctx = canvas.getContext('2d'); 16 17 // クリックイベントの登録 18 canvas.onclick = function(e) { 19 // 一度描画をクリア 20 21 22 // クリック位置の座標計算(canvasの左上を基準。-2ずつしているのはborderの分) 23 var rect = e.target.getBoundingClientRect(); 24 mouseX = e.layerX; 25 mouseY = e.layerY; 26 27 // クリック位置を中心に円を描画 28 //ctx.beginPath(); 29 //ctx.arc(mouseX/1.73, mouseY/1.95, 5, 0, Math.PI * 2, false); 30 // ctx.fill(); 31 text = $('#text').val(); 32 size = $('#size').val(); 33 color = $('#color').val(); 34 35 console.log(size); 36 console.log(mouseX + ","+mouseY); 37 console.log("Math.floor(rect.left)"+Math.floor(rect.left)); 38 console.log("rect.left"+rect.left); 39 console.log("rect.top"+rect.top); 40 console.log("e.clientX"+e.clientX); 41 // 座標の表示テキストを描画 42 var maxWidth = 200; 43 ctx.textAlign = 'right'; 44 ctx.font = size+"px 'MS ゴシック'"; 45 ctx.fillStyle = color; 46 47 ctx.fillText(text, mouseX, mouseY); 48 //setTF(this.form.txtField1,'visible',5,100); 49 50 } 51 52};

ネット上で同じことをしようとしていると考えられる方のコードを利用してみましたがうまくいきませんでした。そのコードが以下のものになります。完全にお手上げ状態です。恐縮ですが詳しい方、何卒ご教授のほどお願い致します。

html

1<html> 2<head> 3<meta charset="UTF-8" /> 4<title></title> 5 6<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 7<script src="http://code.highcharts.com/highcharts.js"></script> 8<script src="canvas.js"></script> 9</head> 10<body> 11 <canvas id="c" width="200" height="200"></canvas> 12 13</body> 14</html> 15

javascript

1var canvas = document.getElementById("c"), 2 textarea = null; 3 4canvas.addEventListener('onclick', function(e) { 5 if(!textarea) { 6 textarea = document.createElement('textarea'); 7 textarea.className = 'info'; 8 document.body.appendChild(textarea); 9 } 10 var x = e.clientX - canvas.offsetLeft, 11 y = e.clientY - canvas.offsetTop; 12 console.log("asasasasasasasasas"+x); 13 textarea.value = "x: " + x + " y: " + y; 14 textarea.style.top = e.clientY + 'px'; 15 textarea.style.left = e.clientX + 'px'; 16}, false);

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

これでそれっぽく動いてるんですが違います?

html

1<html> 2<head> 3<meta charset="UTF-8" /> 4<title></title> 5 6<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 7<script src="http://code.highcharts.com/highcharts.js"></script> 8</head> 9<body> 10 <canvas id="c" width="200" height="200"></canvas> 11 12</body> 13<script> 14var canvas = document.getElementById("c"), 15 textarea = null; 16 17canvas.addEventListener('click', function(e) { 18 if(!textarea) { 19 textarea = document.createElement('textarea'); 20 textarea.className = 'info'; 21 document.body.appendChild(textarea); 22 } 23 var x = e.clientX - canvas.offsetLeft, 24 y = e.clientY - canvas.offsetTop; 25 console.log("asasasasasasasasas"+x); 26 textarea.value = "x: " + x + " y: " + y; 27 textarea.style.position = 'absolute'; 28 textarea.style.top = e.clientY + 'px'; 29 textarea.style.left = e.clientX + 'px'; 30}, false); 31</script> 32</html>

投稿2018/11/28 08:27

rururu3

総合スコア5545

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hiroakikoura

2018/11/29 11:16

回答ありがとうございます! かなり理想的な動きをしています。 プラスで、書き込んだものを残していく形にしたいのですが、もし何か案がありましたら、恐縮ですがご教授 お願いいたします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問