您當前位置：首頁 > web前端 > jscript > javascript+html5實現在網頁上畫圖效果

javascript+html5實現在網頁上畫圖效果

來源：程序員人生發布時間：2014-01-31 15:29:23 閱讀次數：2911次

這是一個用javascript 在canvas 上實現的簡單的畫圖應用，用支持html5 的瀏覽器便可在下面的區域進行繪畫：

您的瀏覽器不支持canvas!

功能很簡單，原理其實和拖放是類似的，主要是三個事件：

1. 在canvas 上綁定mousedown 事件以標志繪畫的開始(調用moveTo 移動畫筆)

2. 在document 上綁定mousemove 事件來處理繪畫時的行為(調用lineTo 以及stroke 進行繪畫)

3. 在document 上綁定mouseup 事件以標志繪畫的結束(解綁document 上的兩個事件)

實現時需特別注意的一點是調用moveTo 以及lineTo 方法時如何傳遞正確的坐標值，這個坐標值應該是光標相對于canvas 左上角的偏移量，獲取時需要把canvas 相對于當前視口的位置考慮進去，getBoundingClientRect 方法則正好派上了用場(支持HTML5 的瀏覽器應該都實現了這個方法)，最后用event 對象的clientX, clientY 減去getBoundingClientRect 方法返回的left, top 值即可。

就這樣一個簡單的鼠繪功能就完成了，不足之處也有，比如不能夠畫點。。。我個人覺得用canvas 來做畫圖還是比較弱的，復雜一些的功能就不太好實現了，不過大家也可以嘗試下哦，比如要添加個保存圖片的方法，定義Draw.prototype.save = function() {...}，其中可調用toDataURL 方法實現。

這里有個不錯的HTML5 canvas 教程可供初學者學習~

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>draw demo</title></head><body><canvas id="the_stage" width="600" height="400" style="border:1px solid #999;">您的瀏覽器不支持canvas!</canvas><script>function Draw(arg) {if (arg.nodeType) {this.canvas = arg;} else if (typeof arg == 'string') {this.canvas = document.getElementById(arg);} else {return;}this.init();}Draw.prototype = {init: function() {var that = this;if (!this.canvas.getContext) {return;}this.context = this.canvas.getContext('2d');this.canvas.onselectstart = function () {return false; //修復chrome下光標樣式的問題};this.canvas.onmousedown = function(event) {that.drawBegin(event);};},drawBegin: function(e) {var that = this,stage_info = this.canvas.getBoundingClientRect();window.getSelection ? window.getSelection().removeAllRanges() :document.selection.empty(); //清除文本的選中this.context.moveTo(e.clientX - stage_info.left,e.clientY - stage_info.top);document.onmousemove = function(event) {that.drawing(event);};document.onmouseup = this.drawEnd;},drawing: function(e) {var stage_info = this.canvas.getBoundingClientRect();this.context.lineTo(e.clientX - stage_info.left,e.clientY - stage_info.top);this.context.stroke();},drawEnd: function() {document.onmousemove = document.onmouseup = null;}};var draw = new Draw('the_stage');</script></body></html><br /><center>如不能顯示效果，請按Ctrl+F5刷新本頁，更多網頁代碼：<a href='http://www.vxbq.cn/' target='_blank'>http://www.vxbq.cn/</a></center>
提示：僅在IE9、Chrome和Firefox下有效!

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生

------分隔線----------------------------

上一篇 使用準則進行條件查詢--1.4.從窗體中選擇查詢的條件

下一篇 張偉：醫療行業網站如何提高網站預約率

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關注

欄目熱點

多多色-多人伦交性欧美在线观看-多人伦精品一区二区三区视频-多色视频-免费黄色视屏网站-免费黄色在线

javascript+html5實現在網頁上畫圖效果