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

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

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

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

3429閲覧

Jqueryにてお絵かきアプリで色のセレクトボックスを加え、線の色を変更する方法。

Tomoaki_Fukuda

総合スコア75

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2015/06/03 18:30

下記のプログラムで、線の色のセレクトボックスを加え、選択した色に線の色を変更したいのですが、色が変更されません。(セレクトボックスの追加までは出来ました。)色の変更の仕方をご教示願います。

lang

1コード
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>canvas.html</title> </head> <body> <section> <h1>Canvas</h1> <nav> <!-- 線の色を変更するHTML要素 --> <select name="color" id = "selectbox"> <option value="#f52c09">赤</option> <option value="#000000">黒</option> <option value="#4325f7">青</option> </select> <!-- 線の太さを変更するHTML要素 -->

<button id="clear_btn">クリアー</button>

</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 = 10; //iPadなどは15+すると良いかも var oldX = 0; //1つ前の座標を代入するための変数 var oldY = 0; //1つ前の座標を代入するための変数 var bold_line = 3; //ラインの太さをここで指定 var color = "#fff"; //ラインの色をここで指定 //------------------------------------------------ //var can = $("#drowarea")[0]; //CanvasElement //var context = can.getContext("2d"); //描画するための準備! //------------------------------------------------ //上2つのスクリプトを記述します。 var can = $("#drowarea")[0]; //CanvasElement var context = can.getContext("2d"); //描画するための準備! //MouseDown:フラグをTrue //----------------------------------------------- //$(can).on("mousedown", function(e){ //oldX = e.offsetX; //MOUSEDOWNしたX横座標取得 //oldY = e.offsetY - txy; //MOUSEDOWN Y高さ座標取得 //canvas_mouse_event=true; //}); //----------------------------------------------- //上5つのスクリプトを記述します。 $(can).on("mousedown", function(e){ oldX = e.offsetX; oldY = e.offsetY; canvas_mouse_event=true; }); //MouseMove: //---------------------------------------------- //$(can).on("mousemove", function (e){ // if(canvas_mouse_event==true){ // var px = e.offsetX; // var py = e.offsetY - txy; // context.strokeStyle = color; // context.lineWidth = bold_line; // context.beginPath(); // context.lineJoin= "round"; // context.lineCap = "round"; // context.moveTo(oldX, oldY); // context.lineTo(px, py); // context.stroke(); // context.closePath(); // oldX = px; // oldY = py; // } //}); $(can).on("mousemove",function(e){ if(canvas_mouse_event ==true){ //書き込みをする。 var px = e.offsetX; var py = e.offsetY - txy; //ここが間違っているのですが、わかりません・・・ $("#selectbox").on("change",function(){ context.strokeStyle = this }); context.lineWidth = 70; context.beginPath(); context.lineJoin="round"; context.lineCap="round"; context.moveTo(oldX,oldY) context.lineTo(px, py) context.stroke(); context.closePath(); oldX = px; oldY = py; } }); //MouseUp:フラグをfalse //------------------------------------------------ //$(can).on("mouseup", function(e){ // canvas_mouse_event=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); //}); //----------------------------------------------------------------- $("#clear_btn").on("click",function (){ context.beginPath(); context.clearRect(0, 0, can.width, can.height); }); </script> </body> </html>

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

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

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

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

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

guest

回答2

0

ご回答誠にありがとうございました!!
大変助かりました^^

投稿2015/06/06 06:07

Tomoaki_Fukuda

総合スコア75

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

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

0

ベストアンサー

mousemoveイベント時に $("#selectbox").on("change",function(){})を記述してもセレクトボックスにchangeイベントを設定しているだけに過ぎません。
$("#selectbox").on("change",function(){})$(can).on("mousemove",function(){})の外に記述しましょう。
セレクトボックスので値を保持しておけば、大丈夫かと思います。以下にコードを載せます。

lang

1var color = "#fff"; //ラインの色をここで指定 2$("#selectbox").on("change",function(){ 3 color = $(this).val(); 4}); 5$(can).on("mousemove",function(e){ 6 if(canvas_mouse_event ==true){ 7 //書き込みをする。 8 var px = e.offsetX; 9 var py = e.offsetY - txy; 10 11 //ここで保持した色を設定 12 context.strokeStyle = color; 13 context.lineWidth = 70; 14 context.beginPath(); 15 context.lineJoin="round"; 16 context.lineCap="round"; 17 context.moveTo(oldX,oldY) 18 context.lineTo(px, py) 19 context.stroke(); 20 context.closePath(); 21 oldX = px; 22 oldY = py; 23 } 24});

投稿2015/06/04 00:47

orange0190

総合スコア1698

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問