canvas實現滑鼠繪圖
阿新 • • 發佈：2019-01-25
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/jquery-1.11.0.min.js"></script> <style> #canvas_draw{ margin: 0px; background-color: #FFFFF0; } </style> </head> <body style="margin:0px;"> <div> <canvas id="canvas_draw" width="500px" height="500px"></canvas> </div> <div> <button id="clear_all">清空</button> </div> </body> <script> var clear_btn = document.getElementById("clear_all"); var run_btn = document.getElementById("run_all"); clear_btn.addEventListener('click',function(){ ctx.clearRect(0,0,500,500); piexs.splice(0,piexs.length); },false); //獲取canvas上下文 function getContextOfCanvas(id){ var canvas_dom = document.getElementById(id); var ctx = canvas_dom.getContext("2d"); return ctx; } var ctx = getContextOfCanvas("canvas_draw"); //滑鼠劃線的方法(重繪piexs中的點) function drawLine(){ ctx.clearRect(0,0,500,500); for(var i = 0;i < piexs.length; i ++){ var piex = piexs[i]; ctx.fillStyle = "green"; ctx.beginPath(); ctx.arc(piex.x,piex.y,2,0,Math.PI*2,false); ctx.closePath(); ctx.fill(); } } //儲存滑鼠滑過 var piexs = []; //用來判斷滑鼠是否還在按下 var down_flag = false; //監聽事件 $('canvas').mousedown(function(e){//滑鼠按下時的事件 down_flag = true; }).mouseup(function(e){//滑鼠擡起事件 down_flag = false; }).mousemove(function(e){//滑鼠移動事件 var x = e.clientX; var y = e.clientY; if(down_flag){//如果滑鼠按下,則將點加入陣列,並繪製 var piex = { x:x, y:y }; piexs.push(piex); drawLine(); } }) </script> </html>