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

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

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

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

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

2716閲覧

canvasの縮尺について

hiroakikoura

総合スコア13

JavaScript

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

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2018/07/18 07:17

どなたかご教授願い致します

現在JavaScriptでテキストボックス内の文字列を読み込み、canvasを用いてcanvas内のクリックした位置に読み込んだテキストを表示させるようなものを作っております。
文字列を読み込み、canvasを用いてcanvas内のクリックした位置に読み込んだテキストを表示させることはできているのですが、canvasのサイズを大きくすると縮尺の違いからか、思った位置にテキストを表示させることができません。
悔むなく、以下のようにクリックされた位置のx座標、y座標を縮尺が合うように割っているのですが、これだと文字が少しぼやけてしまいます何かいい解決策はないでしょうか?お願いします

JavaScript

1ctx.fillText(text, mouseX/1.73, mouseY/1.95);

以下各全体ソースになります。

HTML

1<html> 2 3<head> 4 <meta charset="utf-8"> 5 <title>canvasでクリックされた位置の座標を取得・表示する</title> 6 <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 7 <script src="canvas.js"></script> 8 <link rel="stylesheet" href="canvas.css" /> 9</head> 10 11<body> 12 13 <div id="axisCanvasRapper"> 14 <canvas id="axisCanvas"style="width: 700px; height: 800px; margin: 0 auto;position: absolute; left: 500px; top: 200px"></canvas> 15 </div> 16 17 Text: <input id="text" name="text" type="text" value="Example"> | 18 Size: <input id="size" name="size" type="text" size="3" value="14"> | 19 Color: <input id="color" name="color" type="text" size="7" value="#000"> 20 21 22</body> 23 24</html>

JavaScript

1var canvas; // canvas要素(HTMLCanvasElement) 2var ctx; // 2Dコンテキスト(CanvasRenderingContext2D) 3var canvasW = 400; // canvas要素の横幅(px) 4var canvasH = 400; // 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.clientX - rect.left - 2; 25 mouseY = e.clientY - rect.top - 2; 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 ctx.fillText(text, mouseX/1.73, mouseY/1.95); 47 48 } 49 50}; 51

CSS

1#axisCanvasRapper { 2 margin: 100px 200px 300px; 3 4 5} 6 7 8 9#axisCanvas { 10 border: 1px solid #CCC; 11} 12#tool { 13 margin: 60px 200px 100px; 14 15} 16#canvas { 17 margin: 10px 20px; 18 border: 2px dotted #DDD; 19} 20#clear { 21 margin: 10px 20px; 22} 23#music { 24 margin: 50px 200px 100px; 25} 26

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

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

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

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

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

guest

回答3

0

ベストアンサー

HTMLのcanvasサイズとJavaScriptのcanvasサイズに差異がありますね。それでズーム(拡大)されたようになったのだと思いますよ。下記でキレイに文字が出ました。


mouseX とmouseY の値のとり方を変更。
fillTextの微調整の計算式を削除

js

1var canvas; // canvas要素(HTMLCanvasElement) 2var ctx; // 2Dコンテキスト(CanvasRenderingContext2D) 3var canvasW = 400; // canvas要素の横幅(px) 4var canvasH = 400; // 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 ctx.fillText(text, mouseX, mouseY); 47 48 } 49 50};

JavaScriptで設定しているwidth,heightとstyleのwidth、heightを同一の値に変更

html

1<html> 2 3<head> 4 <meta charset="utf-8"> 5 <title>canvasでクリックされた位置の座標を取得・表示する</title> 6 <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 7 <script src="canvas.js"></script> 8 <link rel="stylesheet" href="canvas.css" /> 9</head> 10 11<body> 12 13 <div id="axisCanvasRapper"> 14 <canvas id="axisCanvas"style="width: 400px; height: 400px; margin: 0 auto;position: absolute; left: 500px; top: 200px"></canvas> 15 </div> 16 17 Text: <input id="text" name="text" type="text" value="Example"> | 18 Size: <input id="size" name="size" type="text" size="3" value="14"> | 19 Color: <input id="color" name="color" type="text" size="7" value="#000"> 20 21 22</body> 23 24</html>

投稿2018/07/18 08:16

mosapride

総合スコア1480

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

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

hiroakikoura

2018/07/18 08:33

迅速に回答していただきありがとうございます。 鮮明に表示することができました!! 本当にありがとうございました!
guest

0

canvasのwidth/height属性とwidth/heightスタイルは混同してしまうのは仕方ないところですが、
それぞれ意味が違います。

canvasのwidth/height属性はコンテキスト(のビューポート?)のサイズを設定する属性となります。

js

1canvas.width = 400; 2canvas.height = 400;

canvasのwidth/heightスタイルが要素のサイズを設定します。

js

1canvas.style.width = '400px'; 2canvas.style.height = '400px';

このコンテキストのサイズとスタイルのサイズを一致させればクリックした位置もずれることがなくなります。

js

1const w = 400; 2const h = 400; 3canvas.width = w; 4canvas.height = h; 5canvas.style.width = `${w}px`; 6canvas.style.height = `${h}px`;

投稿2018/07/18 08:20

turbgraphics200

総合スコア4267

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

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

0

canvasは、それ自体の描画エリアとしてのwidthとheightを持ちます。
質問者さんのサンプルの場合、(400,400)が描画エリアのサイズです。

HTMLエレメントとしてのcanvas要素は、スタイルシートによって、表示サイズを自由に変えることが出来ます。
今回のサンプルの場合、400x400の描画エリアを変倍させて(700,800)で画面に表示しろと言う指示です。

内部で持っている画像エリアのサイズが400,400なのに、それを700,800に拡大したら、1x1pixelの画素は1.75x2.0倍に拡大するので文字がぼやけるのは当然です。
負荷対策として、毎秒数枚レンダリングするような場合に、描画エリアは小さい方が負荷を抑えることが出来るのは事実です。消費メモリを抑えることも出来ます。
今回の場合、クリックイベントによる描画のみであるので、描画エリアを小さく抑える意味はそれほど無いのではないかと思います。

クリック座標をキャンバスのサイズと見た目のサイズの割合から算出するのは正しいアプローチです。
描画エリアを1000,1000にしてスタイルシートで700,800に縮尺させることもできると思いますが、いかがでしょう。

投稿2018/07/18 08:51

efcode

総合スコア422

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問