使用jQuery实现canvas中的getContext("2d")方法

使用canvas中，用原生的JS代码没有任何问题，但是在用jQuery来实现的时候，会遇到没有getContext()方法。

原生代码如下：

<canvas id="myCanvas"></canvas>

    <script type="text/javascript">

    //获取图形容器
    var canvas=document.getElementById('myCanvas');

    //渲染
    var ctx=canvas.getContext('2d');

    //设置颜色
    ctx.fillStyle='#FF0000';

    //输出一个位于坐标（0,0）位置的，宽为80，高为100的矩形
    ctx.fillRect(0,0,80,100);

    </script>

可是使用jQuery的时候就出现问题了，当使用$('#myCanvas')来获取的时候，

var ctx=canvas.getContext('2d');

这句会提示一个不存在的函数getContext()；

原因是因为getContext是DOM对象方法，也就是js原生方法，不能用jquery对象直接调用；

解决办法如下，将

var ctx=canvas.getContext('2d');

改为

var ctx=canvas[0].getContext('2d');

就可以正常使用了。