使用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');

就可以正常使用了。