使用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');
就可以正常使用了。
个人决定如果做canvas 还是使用原生的比较好点
是的,这是上次有人问,就研究了一下