首頁 > web前端 > H5教程 > 主體

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

黄舟
發布: 2017-03-18 16:16:17
原創
2126 人瀏覽過

下面小編就為大家帶來一篇用html5canvasJavaScript建立一個繪圖程式的簡單實例。小編覺得挺不錯的, 現在就分享給大家,也給大家做個參考。一起跟著小編過來看看吧

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

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

XML/HTML Code复制内容到剪贴板
<canvas id="canvasInAPerfectWorld" width="490" height="220"></canvas>
登入後複製

取得繪圖環境,context物件提供了用於在畫布上繪圖的方法和屬性


context = document.getElementById(&#39;canvasInAPerfectWorld&#39;).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。

$(&#39;#canvas&#39;).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重繪畫布。

$(&#39;#canvas&#39;).mousemove(function(e){   
   if(paint){   
     addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);   
     redraw();   
   }   
 });
登入後複製

3 mouseup事件

#mouseup滑鼠點擊後放開或拖曳後鬆開,表示繪製完成該路徑,將paint置為false。

$(&#39;#canvas&#39;).mouseup(function(e){   
   paint = false;   
 });
登入後複製

4 mouseleave事件

#mouseleave滑鼠離開canvas元素,將paint置為false。

$(&#39;#canvas&#39;).mouseleave(function(e){   
  paint = false;   
});
登入後複製

以上是使用html5的canvas和JavaScript建立一個繪圖程式的範例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!