HTML Canvas 鼠標畫圖

原文來自:http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app(已被牆)

譯文: http://fatkun.com/2011/02/html5-canvas-paint.html

我也不打算全部翻譯了…大部分也看的懂,就算看不懂,代碼也能看懂….o(╯□╰)o原諒我非常懶…很久沒寫博客了.

——————-以下是一個簡單的例子————————————-

html容器

首先，准備個容器,也就是畫板了。

<canvas id="canvasInAPerfectWorld" width="490" height="220"></canvas>

但是，由於IE部分版本還是不支持HTML5，那我們可以借用exCanvas兼容IE..

<div id="canvasDiv"></div>

初始化js代碼

如果你不管IE使用第一種方法

context = document.getElementById('canvasInAPerfectWorld').getContext("2d");

為了兼容IE，不得不使用下面這個方法，創建一個canvas，然后使用excanvas初始化。當然，為了IE兼容，你需要針對IE加上exCanvas.js

var canvasDiv = document.getElementById('canvasDiv');
canvas = document.createElement('canvas');
canvas.setAttribute('width', canvasWidth);
canvas.setAttribute('height', canvasHeight);
canvas.setAttribute('id', 'canvas');
canvasDiv.appendChild(canvas);
if(typeof G_vmlCanvasManager != 'undefined') {
	canvas = G_vmlCanvasManager.initElement(canvas);
}
context = canvas.getContext("2d");

開始一個簡單的畫板

在開始之前，說說怎么做先。它包含了四個鼠標事件和兩個方法。addClick是為了記錄鼠標的移動點，redraw是把記錄的數據畫出來。 (提一下，由於原作者使用了jquery，所以你也要把jquery引用進來。)

鼠標按下事件(Mouse Down Event)

當鼠標按下時，把paint設為true，表示正在畫，鼠標沒松開。把鼠標點記錄下來。

$('#canvas').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();
});

鼠標移動事件(Mouse Move Event)

當按下鼠標的時候，鼠標移動就把點記錄下來並畫出來。

$('#canvas').mousemove(function(e){
  if(paint){//是不是按下了鼠標
    addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
    redraw();
  }
});

鼠標松開事件(Mouse Up Event)

$('#canvas').mouseup(function(e){
  paint = false;
});

鼠標移開事件(Mouse Leave Event)

$('#canvas').mouseleave(function(e){
  paint = false;
});

addClick方法

記錄鼠標坐標點

var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var paint;
 
function addClick(x, y, dragging)
{
  clickX.push(x);
  clickY.push(y);
  clickDrag.push(dragging);
}

redraw方法

目前這個redraw方法是每次都清空畫板，然后重新把所有的點都畫過，雖然效率不高，但是這樣看起來還是挺簡單的。

function redraw(){
  canvas.width = canvas.width; // Clears the canvas
 
  context.strokeStyle = "#df4b26";
  context.lineJoin = "round";
  context.lineWidth = 5;
 
  for(var i=0; i < clickX.length; i++)
  {
    context.beginPath();
    if(clickDrag[i] && i){//當是拖動而且i!=0時，從上一個點開始畫線。
      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();
  }
}

最終效果

點我看效果，趕緊點我

最后

這上面的只是個簡單的例子啦。。。原作者還在上面代碼的基礎上加了顏色，大小，橡皮擦等功能呢~~想看的翻牆去看作者博客吧。。這年頭不會翻牆還真不好意思見人。