- ベストアンサー
マウス座標の表示ができない？
- マウス座標を表示しようとしたができない。
- Hello World! のようにcanvas上に座標を表示する方法は？
- マウス座標は alert() で確認できる。
- mechwarrior42
- お礼率50% (4/8)
- JavaScript
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
キャンバスに文字を表示するだけの大きさ（広さ）があるとして。 そのalert()のタイミングは、fillText()と同じタイミングですか？ ------------------ //マウス座標の表示・・・ができない？ ctx.fillStyle="rgb(0, 0, 0)"; ctx.font = "18px Arial"; //Hello Worldは表示できる ctx.fillText("Hello World!", 20, 250); //この書き方が、おかしい？ alert("mouseX = "+mouseX+"\n"+"mouseY = "+mouseY); ctx.fillText("mouseX =" + mouseX, 50, 50); ctx.fillText("mouseY =" + mouseY, 50, 75); ------------------ 違うタイミングでalertを出していたのなら、そのalert()を出した直後にfillText()すれば良いと思います。
その他の回答 (1)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
>No.1補足 「変数のスコープ」というのを調べてみてください。 canvas.getctx('2d')ではなくcanvas.getContext('2d')です。
補足
ありがとうございます。 変数のスコープっていうのが少しわかりました。 ですが、参照渡し的なとこらへんが、ちょっと難しかったので、とりあえず メソッドの中に放り込む形で、表示できるようになりました。 とは言え、マウスをうごかし続けるだけで、座標が真っ黒に上書きされて いくので、消して書いてするループ処理を今度はがんばってみます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>-Training1-</title> <link rel="stylesheet" href="Training1.css"> </head> <body> <canvas id="canvas" width="300" height="300" onmousemove="on_mousemove(event)" ></canvas> <script> //描画コンテキストを取得 var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle = "rgba(255, 0, 255, 0.5)"; ctx.fillRect (125, 50, 60, 50); function on_mousemove(e){ var rect=e.target.getBoundingClientRect(); var mouseX=e.clientX-rect.left; var mouseY=e.clientY-rect.top; ctx.fillStyle="rgb(0,0,0)"; ctx.font = "18px Arial"; ctx.fillText("mouseX"+mouseX,50,190); ctx.fillText("mouseY"+mouseY,50,220); } </script> </body> </html>
補足
すみません。ソースコード端折り過ぎでした。 改めて、ご指摘されたように前後に挟んでアラートテストとfillText()も、挟んでやってみたのですが、 どうやら、座標の値がon_mousemove()のメソッド内で終わってるようで、fillText()に渡せないでいます。 どうすれば、値（座標）を渡せるでしょうか？ <!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>-Training1-</title> <link rel="stylesheet" href="Training1.css"> </head> <body> <canvas id="canvas" width="300" height="300" onmousemove="on_mousemove(event)" ></canvas> <script> //描画コンテキストを取得 var canvas = document.getElementById('canvas'); var ctx = canvas.getctx('2d'); //赤色で塗りつぶす ctx.fillStyle ="rgb(64,128,255)"; //左から30上から30の位置に、横幅64・高さ32の四角形を描く ctx.fillRect(30,30,42,32); //マウス座標の表示・・・ができない？ ctx.fillStyle="rgb(0,0,0)"; ctx.font = "18px Arial"; //Hello Worldは表示できる // ctx.fillText("Hello World!",20,250); //この書き方が、おかしい？ alert("mouseX = "+mouseX+"\n"+"mouseY = "+mouseY); //質問のために、さっき挟み込んだ アラートです (>_<) ctx.fillText("mouseX"+mouseX,50,50); //fillTextのもともとの場所です。 ctx.fillText("mouseY"+mouseY,50,80); function on_mousemove(e){ var rect=e.target.getBoundingClientRect(); var mouseX=e.clientX-rect.left; var mouseY=e.clientY-rect.top; ctx.fillText("mouseX"+mouseX,50,110); //ここに一組 ctx.fillText("mouseY"+mouseY,50,140); //座標の取得はアラートにて確認済み ここで一発目で座標出たので、スクリーンショット 撮ったのはこのアラートのです。 alert("mouseX = "+mouseX+"\n"+"mouseY = "+mouseY); ctx.fillText("mouseX"+mouseX,50,190); //ここに一組 ctx.fillText("mouseY"+mouseY,50,220); } </script> </body> </html>