這是一個用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>