浅谈jquery中使用canvas的问题


Posted in Javascript onOctober 10, 2016

使用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的问题全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
jqGrid jQuery 表格插件测试代码
Aug 23 Javascript
Bootstrap每天必学之按钮(Button)插件
Apr 25 Javascript
jQuery基于xml格式数据实现模糊查询及分页功能的方法
Dec 25 Javascript
js实现音频控制进度条功能
Apr 01 Javascript
用js将long型数据转换成date型或datetime型的实例
Jul 03 Javascript
JavaScript+HTML5实现的日期比较功能示例
Jul 12 Javascript
深入理解node.js http模块
Jan 24 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
Jun 11 Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
Apr 01 Javascript
javascrit中undefined和null的区别详解
Apr 07 Javascript
js打开word文档预览操作示例【不是下载】
May 23 Javascript
jquery实现点击左右按钮切换图片
Jan 27 jQuery
a标签跳转到指定div,jquery添加和移除class属性的实现方法
Oct 10 #Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
Oct 10 #Javascript
js监听键盘事件的方法_原生和jquery的区别详解
Oct 10 #Javascript
js 弹出虚拟键盘修改密码的简单实例
Oct 10 #Javascript
js捕捉键盘事件和按键键值的方法
Oct 10 #Javascript
js中获取键盘事件的简单实现方法
Oct 10 #Javascript
轻松实现jquery选项卡切换效果
Oct 10 #Javascript
You might like
PHP 第二节 数据类型之数值型
2012/04/28 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
jquery实现滑动图片自己测试的例子
2013/11/05 Javascript
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
2015/03/05 Javascript
php基于redis处理session的方法
2016/03/14 Javascript
Highcharts 多个Y轴动态刷新数据的实现代码
2016/05/28 Javascript
JavaScript实现DOM对象选择器
2016/09/24 Javascript
使用Promise链式调用解决多个异步回调的问题
2017/01/15 Javascript
footer定位页面底部(代码分享)
2017/03/07 Javascript
JS排序之选择排序详解
2017/04/08 Javascript
JS实现的Unicode编码转换操作示例
2017/04/28 Javascript
Vue.js实现一个todo-list的上移下移删除功能
2017/06/26 Javascript
[01:14:05]《加油DOTA》第四期
2014/08/25 DOTA
Python实现全角半角转换的方法
2014/08/18 Python
Python中urllib2模块的8个使用细节分享
2015/01/01 Python
Python的Bottle框架中获取制定cookie的教程
2015/04/24 Python
Python中用于检查英文字母大写的isupper()方法
2015/05/19 Python
解决python3 安装完Pycurl在import pycurl时报错的问题
2018/10/15 Python
Python使用sqlalchemy模块连接数据库操作示例
2019/03/13 Python
pytorch中的transforms模块实例详解
2019/12/31 Python
通过python实现windows桌面截图代码实例
2020/01/17 Python
Python-opencv 双线性插值实例
2020/01/17 Python
Python3 集合set入门基础
2020/02/10 Python
python圣诞树编写实例详解
2020/02/13 Python
使用Pycharm分段执行代码
2020/04/15 Python
详解移动端HTML5音频与视频问题及解决方案
2018/08/22 HTML / CSS
都柏林通行卡/城市通票:The Dublin Pass
2020/02/16 全球购物
高三上学期学习自我评价
2014/04/23 职场文书
煤矿安全生产标语
2014/06/06 职场文书
2014年煤矿工作总结
2014/11/24 职场文书
奠基仪式致辞
2015/07/30 职场文书
小学生安全教育主题班会
2015/08/12 职场文书
远程教育集中轮训基层干部培训班学习心得体会
2016/01/09 职场文书
就业指导讲座心得体会
2016/01/15 职场文书
2019年第四季度财务部门工作计划
2019/11/02 职场文书