下面小編就為大家帶來一篇用html5的canvas和JavaScript建立一個繪圖程式的簡單實例。小編覺得挺不錯的, 現在就分享給大家,也給大家做個參考。一起跟著小編過來看看吧
本文將引導你使用canvas和JavaScript建立一個簡單的繪圖程式。
先準備容器Canvas元素,接下來所有的事情都會在JavaScript裡面。
XML/HTML Code复制内容到剪贴板 <canvas id="canvasInAPerfectWorld" width="490" height="220"></canvas>
取得繪圖環境,context物件提供了用於在畫布上繪圖的方法和屬性
context = document.getElementById('canvasInAPerfectWorld').getContext("2d");
開始繪圖過程
首先我們需要儲存繪圖路徑點座標,addClick函數會加入座標點值到陣列
var clickX = new Array(); var clickY = new Array(); var clickDrag = new Array();//存储路径点 var paint;//是否绘制,mousedown时置为true function addClick(x, y, dragging) { clickX.push(x); clickY.push(y); clickDrag.push(dragging); }
redraw函數每次呼叫整個canvas就會重新繪製一次。首先我們清空畫布上內容,設定繪製線條顏色粗細線條連接方式。接著
兩點之間繪製一段路徑,將陣列中的座標點依序繪製出來
function redraw(){ context.clearRect(0, 0, context.canvas.width, context.canvas.height); // 清除画布内容 context.strokeStyle = "#df4b26";//设置线条颜色 context.lineJoin = "round";//当两条线条交汇时,创建圆形边角 context.lineWidth = 5;//线条粗细 for(var i=0; i < clickX.length; i++) { context.beginPath();//开始一条路径,或重置当前的路径 if(clickDrag[i] && i){ context.moveTo(clickX[i-1], clickY[i-1]); }else{ context.moveTo(clickX[i]-1, clickY[i]); } context.lineTo(clickX[i], clickY[i]); context.closePath(); context.stroke();//绘制路径 } }
繪製過程所需的事件
1 mousedown事件
繪圖這點擊到畫布上時,將觸發該事件執行。呼叫了addClick函數,並將paint置為true。
$('#canvas').mousedown(function(e){ var mouseX = e.pageX - this.offsetLeft; var mouseY = e.pageY - this.offsetTop; paint = true; addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop); redraw(); });
2 mousemove事件
mousedown中設定的paint為true後,滑鼠移動時觸發mousemove事件執行,將滑鼠移動的所有點記錄下來,並不斷呼叫redraw重繪畫布。
$('#canvas').mousemove(function(e){ if(paint){ addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true); redraw(); } });
3 mouseup事件
#mouseup滑鼠點擊後放開或拖曳後鬆開,表示繪製完成該路徑,將paint置為false。
$('#canvas').mouseup(function(e){ paint = false; });
4 mouseleave事件
#mouseleave滑鼠離開canvas元素,將paint置為false。
$('#canvas').mouseleave(function(e){ paint = false; });
以上是使用html5的canvas和JavaScript建立一個繪圖程式的範例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!