- ベストアンサー
マウスの座標を表示しようとしたのですが、できません
//マウス座標の表示・・・ができない？ ctx.fillStyle="rgb(0, 0, 0)"; ctx.font = "18px Arial"; //Hello Worldは表示できる ctx.fillText("Hello World!", 20, 250); //この書き方が、おかしい？ ctx.fillText("mouseX =" + mouseX, 50, 50); ctx.fillText("mouseY =" + mouseY, 50, 75); Hello World!のようにcanvas上に座標を表示するには、どうすればいいのでしょうか？ ちなみに、マウス座標そのものは alert("mouseX = "+mouseX+"\n"+"mouseY = "+mouseY); で確認できたので取得できてます。（添付画像有）
- 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/2281)
>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>
関連するQ&A
- html5canvasの文字枠のずれ
html5のcanvasで、枠付きの文字列を描画しようとしたら、表示がおかしくなったのですが、理由がわかりません。ブラウザはchromeです。 一部のフォントとサイズのときだけ起きるのですが、それ以外で作れば問題ないのでしょうか。 <canvas id="canvas" width="500" height="500"></canvas> <script type="text/javascript"> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext('2d'); ctx.lineWidth=2; ctx.font = "bold 22px 'ＭＳ Ｐ明朝'" ctx.strokeStyle = 'rgba(255, 0, 0, 1)'; ctx.fillStyle = 'rgba(0, 0, 0, 1)'; ctx.strokeText("aa0.3", 10, 25); ctx.fillText("aa0.3", 10, 25); </script>
- ベストアンサー
- JavaScript
- 拡大するとマウスのローカル座標が変わってしまう
ある四角形の左上から見たマウスの座標を取得したいと考えています。 四角形は移動したり回転させるので、ローカル座標を利用しようと思い、 次のコードを書きました。 mc_box.width = mc_box.width * 2; stage.addEventListener(MouseEvent.MOUSE_MOVE, function(){ mc_label.text = mc_box.mouseX.toString(); }); 一行目でmc_boxのサイズを拡大すると、表示されるmc_box.mouseXは 実際の半分のサイズになってしまいます。 回転させても四角形の左上隅が(0,0)になるようにしたいです。 どうすれば正しくマウスの座標を得られるのでしょうか？
- ベストアンサー
- Flash
- 【html5】canvasでの文字の形の透明くりぬ
html5でcanvasを使用した場合に赤い背景に文字の形に透明くり抜きを行いたいです。 ctx.fillStyle = "rgb(200, 0, 0)"; ctx.fillRect(0, 0, 100, 100); ctx.clearRect(20, 30, 60, 40); ★ここがRectでなく文字の切り抜きにしたい。 イメージ的にはclearText()というのがあればいいのになぁ、という感じです。 パスをmoveToで文字の形にうごかして、clipしなさーい という回答はご勘弁を(^^;)
- ベストアンサー
- HTML
- Processing 円と線分の衝突判定について
最近プログラミングを始めました。 今、画面の中央から落ちてくる円と、マウスボタンを押したときに三角の頂点から真上に表示される線分の２つが、接触したときに円の位置を画面の最上部に移動させ、その後再び下方向に円が移動する様なプログラムを作っています。 それで、それぞれ円と線分を表示させることはができたのですが、どうやれば円と線分が衝突したことになるか分かりません。 プログラムを載せます size(400,400); } void draw(){ background(0); fill(255,0,0); noStroke(); ellipse(200,y,r,r); y = y + 1; noStroke(); fill(10,10,255); triangle(mouseX,mouseY - 20,mouseX - 14,mouseY + 20,mouseX + 14,mouseY + 20); if(mousePressed){ stroke(248,252,3); line(mouseX,0,mouseX,mouseY-20); } } あとはif命令を書き加えれば良いと思うのですが、どうしても条件式が思いつきません。 GW中ずっと悩んでいて分からなかったので質問しました。
- 締切済み
- その他（プログラミング・開発）
- Canvasのメモリーリーク疑いについて
現在、Canvasを使ってペイントソフトにあるような「レイヤー」的な ことが出来ないか実験をしています。 (レイヤー数に関しては、最大で24程度を考えています。) 環境等は、以下の通りです。 OS：Windows XP Pro(SP3) 32bit メモリ:2GB ブラウザ：各ブラウザの最新版(FireFox,Chrome,Opera,safariも実施予定です。) 実験の結果、大量のレイヤーを使用した場合に ついてメモリーリーク的な問題が発生しているような感じがしています。 もちろん、レイヤーなのである程度のメモリ消費は承知の上だったのですが タブを閉じた際や描画してから時間が経過してもメモリ使用量が減少しないのは 使用上問題がありますので質問させて頂くことになった次第です。 (なお、レイヤー数を削減すると、比例してメモリ使用量も削減されていました。 メモリ使用量に関しては、タスクマネージャのプロセスタブのメモリ使用量 で見ています。) で、この問題が特に顕著なのが、Firefoxです。 私見では、1レイヤーにつき1MB程度消費してしまう感じです。 他のブラウザ(クローム、オペラ)では一時的にメモリ使用量は 増加しますが、時間が経過するとだいたい元にもどります。 なお、実験は以下のようなサンプルを作成して行っています。 (途中省略しています。) ご教授して頂きたい点は、以下になります。 ■メモリーリークが起きている場合の対処方法 (特にFirefoxにおける対処方法) ■Canvasを使用しない場合の代替案 宜しくお願い致します。 <html> <head> <script> function draw() { canvas = document.getElementById("g0"); if(!canvas || !canvas.getContext) return false; ctx = canvas.getContext('2d'); ctx.font = "15px 'ＭＳ Ｐゴシック'"; ctx.fillStyle = "black"; ctx.fillText("aaa", 100, 100); canvas = document.getElementById("g1"); if(!canvas || !canvas.getContext) return false; ctx = canvas.getContext('2d'); ctx.font = "15px 'ＭＳ Ｐゴシック'"; ctx.fillStyle = "black"; ctx.fillText("bbb", 150, 150); canvas = document.getElementById("g23"); if(!canvas || !canvas.getContext) return false; ctx = canvas.getContext('2d'); ctx.font = "15px 'ＭＳ Ｐゴシック'"; ctx.fillStyle = "black"; ctx.fillText("eee", 300, 300); } function start() { draw(); } </script> </head> <body onload="start()"> <body onload="start()"> <canvas height="500" width="500" class="g" id="g0"></canvas> <canvas height="500" width="500" class="g" id="g23"></canvas> </body> </html>
- ベストアンサー
- JavaScript
- ２つの図を重ねて表示したい
HTMLもJavaScriptも初心者です。 *.png の図と canvas に書いた図を重ねて表示したいのですが、canvas に書いた図が *.png に隠れて表示されません。 コーディングは次のとおりです。 <html> <title>figures</title> <!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]--> </head> <body> <div id=lyrwall style="position:absolute; left:20px; top:20px;"> <img src=figure.png> </div> <canvas id="canvassample" width="500" height="500"> <script type="text/javascript"> onload = function() { draw(); }; function draw() { var canvas = document.getElementById('canvassample'); if ( ! canvas || ! canvas.getContext ) { return false; } /* 2Dコンテキスト */ var ctx = canvas.getContext('2d'); /* 線を引く */ ctx.beginPath(); ctx.moveTo(20, 20); ctx.lineTo(480, 480); ctx.stroke(); } </script> </canvas> </body> </html> 直線のうち、figure.png と重なる部分が表示されません。表示されるようにするにはどうすればいいのでしょうか。よろしくお願いいたします。
- ベストアンサー
- HTML
- マウスアウトで非表示にする
シーン１に、mc(ムービークリップ)とcomment1(ムービークリップ)を配置 mcにマウスオーバーするとcomment1が表示される。 mcよりマウスアウトするとcommen1が非表示になる。 という感じにしたいのですが、マウスアウトしても非表示に出来ないで困っています。 //----------------------------------- MovieClip(root).comment1.visible = false; var pointX:Number=70; var pointY:Number=50; mc.addEventListener(MouseEvent.MOUSE_OVER, fl_MouseOver); function fl_MouseOver(event:MouseEvent):void { stage.addEventListener(MouseEvent.MOUSE_MOVE,mouseMoveFunc); function mouseMoveFunc(e:MouseEvent):void { MovieClip(root).comment1.visible = true; MovieClip(root).comment1.x=stage.mouseX+pointX; MovieClip(root).comment1.y=stage.mouseY+pointY; } } mc.addEventListener(MouseEvent.MOUSE_OUT, fl_MouseOver2); function fl_MouseOver2(event:MouseEvent):void { mc.removeEventListener(MouseEvent.MOUSE_OVER, fl_MouseOver); MovieClip(root).comment1.visible = false; } //-----------------------------------
- ベストアンサー
- Flash
- Chromeで文字コード(UTF-8)の設定
●質問の主旨 文字コードを常時、"utf-8"に設定したいと考えています。 どのように設定すればよいでしょうか？ ご存知の方ご教示願います ●質問の補足 下記コードにて、ファイルを実行し、 "Canvasの練習"という文字列と、 青色の正方形をはさんだ黄色の正方形2つが、 表示させるつもりです。 しかし、実際に実行すると、 図形は意図通り描画されますが、文字列が文字化けします。 HTML5のコードにおいて、 <meta charset="utf-8">を <meta charset="s-jis"> に変更すると、文字化けもなくなります。 "utf-8"のコードがすでに大量に用意されているので、 PCの方の認識を"s-jis"から"utf-8"に替えるためにはどうすればよいでしょうか？ PCはWindowsVistaで、ブラウザはGoogleChromeです。 ●コード ・HTML5 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Canvasの練習</title> </head> <body> <h1>Canvasの練習</h1> <canvas id="mycanvas" width="400" height="200"> Canvasに対応したブラウザを使ってください。 </canvas> <script src="mycss.js"></script> </body> </html> ・JavaScript // myscript.js window.onload = function() { draw(); } function draw() { var canvas = document.getElementById('mycanvas'); if (!canvas || !canvas.getContext) return false; var ctx = canvas.getContext('2d'); ctx.fillStyle = "yellow"; ctx.save(); ctx.fillRect(0,0,50,50); ctx.fillStyle = "blue"; ctx.fillRect(100,0,50,50); ctx.restore(); ctx.fillRect(200,0,50,50); }
- ベストアンサー
- HTML
- ブラウザで表示されません（申し訳ありません。全くの初学者です。）
長いこと探したのですが、 見つからなかったためご質問させて頂きます。 お恥ずかしいのですが、教えて頂きますと非常に助かります。。。 （http://blog.livedoor.jp/dankogai/archives/50940292.htmlを参考にしました） <input type="submit" value="Hello, World!" onclick="alert(this.value)"> がうまくブラウザで表示されません。 ブログにあるように本来ならばボタンが表示されると思うのですが、 <input type="submit" value="Hello, World!" onclick="alert(this.value)">とそのまま文字が出るだけになっています。 こちらは、なぜなのでしょうか？ また、どうしたら正しい表示をできるのでしょうか？ ご教示願います。 私のPCはMacで、 ブラウザはFireFoxを使用しました。 （他のブラウザでも同様でした）
- 締切済み
- JavaScript
- javascriptのタイプミス
javascript初心者です。以下のコードでどこにミスがあるのか 解りません。どこにあるのでしょうか？ このソースをエディタに 貼ると見やすくなると思います。 <!DOCTYPE html> <html> <head> <title>SnakeBite</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <script type="text/javascript"> var W, H, S = 20; var snake = [ ], foods = [ ]; var keyCode = 0; var point = 0; var timer = NaN; var ctx; // pointオブジェクト function Point(x,y) { this.x = x; this.y = y; } //初期関数 function init() { var canvas = document.getElementById('field'); W = canvas.width / S; H = canvas.height / S; ctx = canvas.getContext('2d'); ctx.font = "20px sans-serif"; //蚊の初期化 snake.push(new Point(W / 2, H / 2)); //餌の初期化 for (var i = 0 ; i < 10 ; i++) { addFood(); } timer = setInterval("tick()", 200); window.onkeydown = keydown; } //餌の追加 function addFood() { while (true) { var x = Math.floor(Math.random() * W); var y = Math.floor(Math.random() * H); if (isHit(foods, x, y) || isHit(snake, x, y)) { continue; } foods.push(new Point(x, y)); break; } } //衝突判定 function isHit(data, x, y) { for (var i = 0 ; i < data.length ; i++) { if (data[i].x==x && data[i].y==Y) { return true; } } return false; } function moveFood(x, y) { foods =foods. filter(function (p){return (p.x !=x || p.y !=y);}); addFood(); } function tick() { var x = snake[0].x; var y = snake[0].y; switch (keyCode) { case 37: x--; break; //左 case 38: y--; break; //上 case 39: x++; break; //右 case 40: y++; break; //下 default: paint(); return; } //自分or壁に衝突 if(isHit(snake,x,y) || x<0 || x>=W || y<0 || y>=H ) clearInterval(timer); paint(); return; } //頭を先頭に追加 snake.unshift(new Point(x,y)); if(isHit(foods, x, y)) { point +=10; //餌を食べた moveFood(x,y); }else{ snake.pop(); //食べていない→しっぽを解除 } paint(); } function paint() { ctx.clearRect(0,0,W * S, H * S); ctx.fillStyle = "rgb(256,0,0)"; ctx.fillText(point, S, S * 2); ctx.fillStyle = "rgb(0,0,255)"; foods.forEach(function (p) { ctx.fillText("+", p.x * S, (p.y + 1) * S);}); snake.forEach(function (p) { ctx.fillText("*", p.x * S, (p.y + 1) * S); }); } function keydown(event) { keyCode = event.keyCode; } </script> </head> <body onload="init()"> <canvas id="field" width="400" height="400" style="background:#cccccc"> </canvas> </body> </html>
- ベストアンサー
- JavaScript
補足
すみません。ソースコード端折り過ぎでした。 改めて、ご指摘されたように前後に挟んでアラートテストと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>