<!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内にペンを持っていくとクリックしていないのに絵が描かれてしまっています。もしよろしけれどなたかわかる方がいらっしゃったら教えていただきたいです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/12/14 06:11