这里有新鲜出炉的 jQuery 示例,程序狗速度看过来!
jQuery 是一个兼容多浏览器的 javascript 框架,核心理念是 write less,do more(写得更少, 做得更多)。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,吸引了来自世界各地的众多 JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。
下面小编就为大家带来一篇浅谈 jquery 中使用 canvas 的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
使用 jquery 控制 canvas 的时候会出现一些问题,
- var cas = document.getElementById('canvas').getContext('2d'); //这个是使用JavaScript的方法,这个没有问题。
- //下面是使用jquery的方法操控canvas。
- $(document).ready(function(){
- var cas=$('#canvas').getContext('2d');<span style="white-space:pre"> </span>//出现问题,对象获取不到getContext()方法
- cas.fillRect(10,10,100,100);
- });
修改的方式为:
- $(document).ready(function(){
- var cas=$('#canvas')[0].getContext('2d');<span style="white-space:pre"> </span>//添加数值索引,转换为dom对象
- cas.fillRect(10,10,100,100);
- });
原因:jQuery() 返回的是 jQuery 对象,而 jQuery 对象是没有 getContext 方法的,需要把 jQuery 对象转换成 Dom 对象,官方文档推荐的方法如上述代码,其实 jQuery 对象就是类数组,用数组下标可以取得 Dom 对象。
注意:html5 使用 canvas 的时候,canvas 的高度和宽度一定要使用内联的方式设置,否者画出的图形会变形。
来源: http://www.phperz.com/article/17/0502/331327.html