浅谈jquery中使用canvas的问题
更新时间：2016年10月10日 09:34:03 投稿：jingxian
下面小编就为大家带来一篇浅谈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的高度和宽度一定要使用内联的方式设置，否者画出的图形会变形。
以上就是小编为大家带来的浅谈jquery中使用canvas的问题全部内容了，希望大家多多支持脚本之家~
相关文章
这篇文章主要介绍了jQuery中replaceWith()方法用法,以实例形式分析了replaceWith()方法用于匹配元素替换的技巧,具有一定的参考借鉴价值,需要的朋友可以参考下2014-12-12
这篇文章主要介绍了jQuery实现定时读取分析xml文件的方法,涉及jquery通过定时器采用Ajax方法读取并处理XML文件的相关技巧,需要的朋友可以参考下2015-07-07
Jq数据列表动态效果，动态更新，支持Ajax动态刷新。下面小编给大家介绍下基于jQuery实现动态数字展示效果，需要的朋友可以参考下2015-08-08
这篇文章主要为大家详细介绍了jQuery排序插件tableSorter的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
根据多个属性选择在某些对选择比较精确的情况下，还是比较实用的，其实很简单，不会的朋友看下本文2013-10-10
这篇文章主要介绍了如何使用jquery序列化表单去除指定元素,需要的朋友可以参考下2014-04-04
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
在网页的首页或图片专题页面很多地方都会用到图片滑动插件来循环切换多张图片，并且用户可以点击左右按钮来切换图片。相信大家都知道jQuery是最优秀的Javascript框架之一2011-12-12
下面小编就为大家带来一篇jquery html动态添加的元素绑定事件详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
这篇文章主要介绍了jQuery日程管理控件glDatePicker用法,结合具体实例形式分析了jQuery控件glDatePicker的简单使用技巧与相关注意事项,需要的朋友可以参考下2017-03-03
这篇文章主要介绍了jQuery实现碰到边缘反弹的动画,非常不错，具有参考借鉴价值，需要的朋友可以参考下2018-02-02
最新评论