DIV CSS 佈局教程網

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

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

XML/HTML Code復制內容到剪貼板

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

獲取繪圖環境，context對象提供了用於在畫布上繪圖的方法和屬性

XML/HTML Code復制內容到剪貼板

1. context = document.getElementById('canvasInAPerfectWorld').getContext("2d");  

開始繪圖過程

首先我們需要存儲繪圖路徑點坐標，addClick函數添加坐標點值到數組

JavaScript Code復制內容到剪貼板

1. var clickX = new Array();   
2. var clickY = new Array();   
3. var clickDrag = new Array();//存儲路徑點   
4. var paint;//是否繪制，mousedown時置為true   
5. function addClick(x, y, dragging)   
6. {   
7.   clickX.push(x);   
8.   clickY.push(y);   
9.   clickDrag.push(dragging);   
10. }  

redraw函數每次調用整個canvas就會重新繪制一次。首先我們清空畫布上內容，設置繪制線條顏色粗細線條連接方式。然後

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

XML/HTML Code復制內容到剪貼板

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。

JavaScript Code復制內容到剪貼板

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

2 mousemove事件

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

JavaScript Code復制內容到剪貼板

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。

XML/HTML Code復制內容到剪貼板

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

 

4 mouseleave事件

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

XML/HTML Code復制內容到剪貼板

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

以上這篇用html5的canvas和JavaScript創建一個繪圖程序的簡單實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持。

原文地址：http://www.cnblogs.com/fangsmile/archive/2016/07/05/5644611.html