下記のプログラムで、線の色のセレクトボックスを加え、選択した色に線の色を変更したいのですが、色が変更されません。(セレクトボックスの追加までは出来ました。)色の変更の仕方をご教示願います。
<!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要素 -->lang
1コード
<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>回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。