###実現したい事
JavaScriptでお絵かきツールをこのサイトを参考にして記述したのですが、マウスをクリックしたときにそのクリック文の描画が出来ません。
マウスをクリックしてその状態でマウスを動かせば描画はされるのですが、マウスをクリックだけして全く動かさないと全く描画されないのです。試行錯誤してソースをいじっても一向に解決しないので分かる方回答お願いします。
###ソース
var drawing = false; // 前回の座標を記録する(初期値:0) var before_x = 0; var before_y = 0; var moveflg = 0; var x; var y; var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); canvas.addEventListener('mousemove', draw_canvas); // マウスをクリックしてる時 canvas.addEventListener('mousedown', function(e) { drawing = true; ctx.beginPath(); var rect = e.target.getBoundingClientRect(); before_x = e.clientX - rect.left; before_y = e.clientY - rect.top; ctx.moveTo(x, y); }); // マウスをクリックしてない時 canvas.addEventListener('mouseup', function() { if(moveflg == 0){ ctx.lineTo(x-1, y-1); ctx.lineCap = 'round'; ctx.lineWidth = 4; ctx.stroke(); console.log("実行中"); } drawing = false; moveflg = 0; console.log("マウス離れた"); }); // 描画の処理 function draw_canvas(e) { // drawingがtrueじゃなかったら返す if (!drawing){ return }; var rect = e.target.getBoundingClientRect(); var x = e.clientX - rect.left; var y = e.clientY - rect.top; ctx.lineWidth = 2; // 描画 ctx.lineCap = 'round'; ctx.beginPath(); ctx.moveTo(before_x, before_y); ctx.lineTo(x, y); ctx.stroke(); ctx.closePath(); // 描画最後の座標を前回の座標に代入する before_x = x; before_y = y; } // クリアボタンクリック時 function delete_canvas(){ ctx.clearRect(0, 0, canvas.width, canvas.height); }
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。