用HTML5 Canvas做一個畫圖板

一個簡單的Canvas應用
服務器君一共花費了111.718 ms進行了4次數據庫查詢,努力地為您提供了這個頁面。
試試閱讀模式?希望聽取您的建議

使用HTML5可以非常簡單地在canvas上實現畫圖應用,用支持html5的瀏覽器便可在下面的區域進行繪畫,要看到演示效果,請確保你的瀏覽器支持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 值即可。

下面是實現代碼:

// <![CDATA[
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');
// ]]>

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

本文地址:http://www.snpmgr.live/librarys/veda/detail/1686,歡迎訪問原出處。

不打個分嗎?

轉載隨意,但請帶上本文地址:

http://www.snpmgr.live/librarys/veda/detail/1686

如果你認為這篇文章值得更多人閱讀,歡迎使用下面的分享功能。
小提示:您可以按快捷鍵 Ctrl + D,或點此 加入收藏

大家都在看

閱讀一百本計算機著作吧,少年

很多人覺得自己技術進步很慢,學習效率低,我覺得一個重要原因是看的書少了。多少是多呢?起碼得看3、4、5、6米吧。給個具體的數量,那就100本書吧。很多人知識結構不好而且不系統,因為在特定領域有一個足夠量的知識量+足夠良好的知識結構,系統化以后就足以應對大量未曾遇到過的問題。

奉勸自學者:構建特定領域的知識結構體系的路徑中再也沒有比學習該專業的專業課程更好的了。如果我的知識結構體系足以囊括面試官的大部分甚至吞并他的知識結構體系的話,讀到他言語中的一個詞我們就已經知道他要表達什么,我們可以讓他坐“上位”畢竟他是面試官,但是在知識結構體系以及心理上我們就居高臨下。

所以,閱讀一百本計算機著作吧,少年!

《大話設計模式》 程杰 (作者)

《大話設計模式》通篇都是以情景對話的形式,用多個小故事或編程示例來組織講解GoF(設計模式的經典名著——Design Patterns: Elements of Reusable Object-Oriented Software,中譯本名為《設計模式——可復用面向對象軟件的基礎》的四位作者Erich Gamma、Richard Helm、Ralph Johnson,以及JohnVlissides,這四人常被稱為GangofFour,即四人組,簡稱GoF)總結的23個設計模式。本書共分為29章。其中,第1、3、4、5章著重講解了面向對象的意義、好處以及幾個重要的設計原則;第2章,以及第6到第28章詳細講解了23個設計模式;第29章是對設計模式的全面總結。

更多計算機寶庫...

燃烧吧足球登陆