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

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

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

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

JavaScript

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

HTML

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

CSS

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

Q&A

解決済

1回答

3567閲覧

javascript canvas においてお絵かきアプリを作成しています。

ssssss

総合スコア17

canvas

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

JavaScript

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

HTML

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

CSS

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

0グッド

1クリップ

投稿2017/12/14 05:51

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>canvas.html</title> </head> <body> <section> <h1>Canvas</h1> <nav> <!-- 線の色を変更するHTML要素 --> <input type="color" id="color"> <!-- 線の太さを変更するHTML要素 --> <input type="range" id="bold" min="0" max="100" value="3"> <p>透 明 度<input type="range" min="0.1" max="1.0" step="0.1" value="0.5" id="alpha"></p> <!-- <button id="clear_btn">クリアー</button>--> <input type="image" id="clear_btn" src="%E3%82%AF%E3%83%AA%E3%82%A2%E3%83%BC%E3%83%9C%E3%82%BF%E3%83%B3.gif" width="px"> </nav> <canvas id="drowarea" width="500" height="500" style="border:1px solid blue;"></canvas> </section> <script src="js/jquery-2.1.3.min.js"></script> <script> //初期化 var canvas_mouse_event = false; //スイッチの役割 [ true=線を引く, false=線は引かない ] *** var txy = 0; //iPadなどは15+すると良いかも var oldX = 0; //1つ前の座標を代入するための変数 var oldY = 0; //1つ前の座標を代入するための変数 var bold_line = 5; //ラインの太さをここで指定 var ggg=0.7; var color = "#000"; //ラインの色をここで指定 var era = 5; //------------------------------------------------ var can = $("#drowarea")[0]; //CanvasElement var context = can.getContext("2d"); //描画するための準備! //------------------------------------------------ //上2つのスクリプトを記述します。必ず! //MouseDown:フラグをTrue //----------------------------------------------- $(can).on("mousedown", function(e){//e=クリックした場所の座標 // console.log(e);//e=クリックした場所の座標 oldX = e.offsetX; //MOUSEDOWNしたX横座標取得 oldY = e.offsetY - txy; //MOUSEDOWN Y高さ座標取得 canvas_mouse_event=true;//oldXoldYをセットして、新しく書き込む }); //----------------------------------------------- //上5つのスクリプトを記述します。 //MouseMove: //---------------------------------------------- $(can).on("mousemove", function (e){//e=クリックした場所の座標 // console.log(e);//e=クリックした場所の座標 if(canvas_mouse_event==true){ // console.log(e); var px = e.offsetX; var py = e.offsetY - txy;//txyを-10にすると指で書いたところを見えるようにする context.globalAlpha = ggg; context.strokeStyle = color; context.lineWidth = bold_line; context.beginPath(); context.lineJoin= "round";//下の2行を書くことで筆が丸くなる context.lineCap = "round"; context.moveTo(oldX, oldY);//開始地点を決める context.lineTo(px, py);//縦横 context.stroke();//実行 context.closePath();//pasuを一回閉じる oldX = px;//oldXに現在の位置を渡す oldY = py;//oldYに現在の位置を渡す var color = document.getElementById('color').value; //追加 context.strokeStyle = color; //変更 var bold_line = document.getElementById('bold').value; context.lineWidth = bold_line; //変更 var ggg = document.getElementById('alpha').value; //追加 context.globalAlpha = ggg; //変更 } }); //MouseUp:フラグをfalse //------------------------------------------------ $(can).on("mouseup", function(){ canvas_mouse_event=false; }); //------------------------------------------------ //クリアーボタンAction //----------------------------------------------------------------- $("#clear_btn").on("click",function (){ context.beginPath();//画像の初期化 context.clearRect(0, 0, can.width, can.height);//座標の初期化 }); //----------------------------------------------------------------- var bt_eracer = document.getElementById("bt_eraser"); bt_eracer.on('click' , function(){ linecolor = "#eee"; bold_line = 20; } , false ); </script> </body> </html>

現在、Bracet canvasでお絵かきアプを作成しています。
ペンで絵を描くことはできたのですが、ペンをクリックしたままcannvas外に出てクリックはなし、そのままcanvas内にペンを持っていくとクリックしていないのに絵が描かれてしまっています。もしよろしけれどなたかわかる方がいらっしゃったら教えていただきたいです。

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

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

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

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

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

guest

回答1

0

ベストアンサー

canvas要素でイベントハンドラを定義していますので、mousedown, mouseup, mousemove等のイベントは、マウスカーソルがそのcanvasの上にある時でなければ発生しません。

ペン(マウスカーソル)がcanvasの外に出たことを検知するには、mouseoutイベントのハンドラを定義すればよいと思います。例えば、mouseoutイベントが発火したタイミングでmouseupと同様にペンが離れたのと同じ扱いにすると、期待通りの動作が得られるのではと思います。

js

1//MouseUp:フラグをfalse 2//------------------------------------------------ 3$(can).on("mouseup", function(){ 4 canvas_mouse_event=false; 5}); 6//------------------------------------------------ 7 8//MouseOut:フラグをfalse 9//------------------------------------------------ 10$(can).on("mouseout", function(){ 11 canvas_mouse_event=false; 12}); 13//------------------------------------------------

投稿2017/12/14 06:05

othersight

総合スコア356

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

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

ssssss

2017/12/14 06:11

ありがとうございます!無事、ペンが再度出現しなくなりました!!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問