JQuery和Canvas

利用JQuery进行Canvas相关程序设计在时候，一定要区分清楚JQuery对象和Dom对象。

例如最常见的声明Canvas在HTML为：

<canvas id="canvas" width="600" height="400">
      do not support canvas
</canvas>

此时，如果要获取CanvasRenderingContext2D对象时，原生JS写法：

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

而利用JQuery是：

var canvas = $("#canvas");
var context = canvas.getContext("2d");

这两种写法中，利用原生写法是可以获得CanvasRenderingContext2D对象的，而利用JQuery的写法是无法正确获取CanvasRenderingContext2D对象的。因为，getContext是一个Dom对象函数，而通过JQuery语法获取的对象是一个JQuery对象，并不是Dom对象，所以它根本没有getContext函数。类似在情况还有innerHTML，这也是一个Dom对象在函数， JQuery对象只有html函数并没有innerHTML函数;再比如获取属性值，Dom对象采用.属性的方式，而JQuery对象采用prop("属性")。

所以，如果要使用Dom对象的函数时，必须将一个JQuery对象转为对应在Dom对象。转换也很简单，因为JQuery对象中持有其对应的Dom对象，只要使用[0]即可：

var canvas = $("#canvas")[0];
var context = canvas.getContext("2d");

此时的canvas就是一个Dom对象，进而可以使用getContext函数去获取CanvasRenderingContext2D对象了。

类似在在给canvas绑定鼠标事件在时候，Dom对象的做法是：

canvas.onmousedown = function(e){
    console.log(e.clientX,e.clientY);
};

canvas.onmousemove = function(e){
    console.log(e.clientX,e.clientY);
};

canvas.onmouseup = function(e){
    console.log(e.clientX,e.clientY);
};

如果使用JQuery的做法是：

//var mycanvas = $("#canvas");
var mycanvas = $(canvas);

mycanvas.mousedown(function(e){
    console.log(e.clientX,e.clientY);
});

mycanvas.mousemove(function(e){
    console.log(e.clientX,e.clientY);
});

mycanvas.mouseup(function(e){
    console.log(e.clientX,e.clientY);
});

mousedown、mouseover、mouseup都是JQuery对象在函数，所以必须由JQuery对象进行调用。$(Dom对象)是常用的Dom对象转JQuery对象在方式。