HTML5とJavascriptを使えばブラウザでお絵かきできるって聞いて、色々試行錯誤してました。マウスをクリックしている時にcanvas上に絵を描きます。以下はコードのメモ。
<!DOCTYPE html> <html> <head></head> <body> <canvas style="display: block; border: 1px solid black;" id ="canvas" width="600" height="405"></canvas> <script> <!-- var canvas = document.getElementById("canvas"); var ctx = canvas.getContext('2d'); var x = 0; var y = 0; draw = false; //マウスの座標を取得する canvas.addEventListener("mousemove",function(e) { var rect = e.target.getBoundingClientRect(); x = e.clientX - rect.left; y = e.clientY - rect.top; //クリック状態なら描画をする if(draw === true) { ctx.beginPath(); ctx.arc(x, y, 10, 0, 2*Math.PI, false); ctx.fill(); } }); //クリックしたら描画をOKの状態にする canvas.addEventListener("mousedown",function(e) { draw = true; }); //クリックを離したら、描画を終了する canvas.addEventListener("mouseup", function(e){ draw = false; }); // --> </script> </body> </html>
でもこのコードじゃ描く一方で消せないんですよね。