文章出處

本文將引導你使用canvas和JavaScript創建一個簡單的繪圖程序。

創建canvas元素

首先準備容器Canvas元素，接下來所有的事情都會在JavaScript里面。

1 <canvas id="canvasInAPerfectWorld" width="490" height="220"></canvas>

獲取繪圖環境

canvas元素本身沒有任何外觀，它就是一塊空白畫板，提供給JS的一套API，大部分的API都不在canvas元素自身定義，canvas元素自身屬性與常規的HTML元素并沒有多大區別， 它的繪圖API都定義在一個CanvasRenderingContext2D對象上(這里簡單翻譯成上下文對象)，該對象通過getContext()方法獲得。

1 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就會重新繪制一次。首先我們清空畫布上內容，設置繪制線條顏色粗細線條連接方式。然后

兩點之間繪制一段路徑，將數組中的坐標點依次繪制出來

 1 function redraw(){
 2   context.clearRect(0, 0, context.canvas.width,   context.canvas.height); // 清除畫布內容
 3   
 4   context.strokeStyle = "#df4b26";//設置線條顏色
 5   context.lineJoin = "round";//當兩條線條交匯時，創建圓形邊角
 6   context.lineWidth = 5;//線條粗細
 7             
 8   for(var i=0; i < clickX.length; i++) {        
 9     context.beginPath();//開始一條路徑，或重置當前的路徑
10     if(clickDrag[i] && i){
11       context.moveTo(clickX[i-1], clickY[i-1]);
12      }else{
13        context.moveTo(clickX[i]-1, clickY[i]);
14      }
15      context.lineTo(clickX[i], clickY[i]);
16      context.closePath();
17      context.stroke();//繪制路徑
18   }
19 }

 

繪制過程需要的事件

1 mousedown事件

繪圖這點擊到畫布上時，將觸發該事件執行。調用了addClick函數，并將paint置為true。

1 $('#canvas').mousedown(function(e){
2   var mouseX = e.pageX - this.offsetLeft;
3   var mouseY = e.pageY - this.offsetTop;
5   paint = true;
6   addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
7   redraw();
8 });

2 mousemove事件

mousedown中設置的paint為true后，鼠標移動時觸發mousemove事件執行，將鼠標移動的所有點記錄下來，并不斷調用redraw重繪畫布。

1 $('#canvas').mousemove(function(e){
2   if(paint){
3     addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
4     redraw();
5   }
6 });

3 mouseup事件

mouseup鼠標點擊后松開或者拖拽后松開，表示繪制完成該路徑，將paint置為false。

1 $('#canvas').mouseup(function(e){
2   paint = false;
3 });

4 mouseleave事件

mouseleave鼠標離開canvas元素，將paint置為false。

1 $('#canvas').mouseleave(function(e){
2   paint = false;
3 });

 


文章列表


不含病毒。www.avast.com
arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄