怎么用html5和JavaScript創建一個繪圖程序

這篇文章主要介紹“怎么用html5和JavaScript創建一個繪圖程序”，在日常操作中，相信很多人在怎么用html5和JavaScript創建一個繪圖程序問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么用html5和JavaScript創建一個繪圖程序”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

本文將引導你使用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和JavaScript創建一個繪圖程序”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！