使用html5的canvas和JavaScript建立一個繪圖程式的範例程式碼

下面小編就為大家帶來一篇用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中文網其他相關文章！