浅谈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 相关文章推荐
编写跨浏览器的javascript代码必备[js多浏览器兼容写法]
Oct 29 Javascript
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
Jun 12 Javascript
jquery获取iframe中的dom对象(两种方法)
Jul 02 Javascript
客户端js性能优化小技巧整理
Nov 05 Javascript
jQuery中[attribute]选择器用法实例
Dec 31 Javascript
js获取元素外链样式的方法
Jan 27 Javascript
JavaScript中数组的合并以及排序实现示例
Oct 24 Javascript
jquery.multiselect多选下拉框实现代码
Nov 11 Javascript
jquery实现(textarea)placeholder自动换行
Dec 22 Javascript
轻松理解Javascript变量的相关问题
Jan 20 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
Feb 08 Javascript
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 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操作xml入门之cdata区段
2015/01/23 PHP
php实现在多维数组中查找特定value的方法
2015/07/29 PHP
CodeIgniter自定义控制器MY_Controller用法分析
2016/01/20 PHP
Angular用来控制元素的展示与否的原生指令介绍
2015/01/07 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
2015/12/09 Javascript
jquery日历插件datepicker用法分析
2016/01/22 Javascript
javascript实现数据双向绑定的三种方式小结
2017/03/09 Javascript
Vue组件实例间的直接访问实现代码
2017/08/20 Javascript
nodejs实现范围请求的实现代码
2018/10/12 NodeJs
浅谈 Webpack 如何处理图片(开发、打包、优化)
2019/05/15 Javascript
关于layui表单中按钮自动提交的解决方法
2019/09/09 Javascript
Layui实现数据表格默认全部显示(不要分页)
2019/10/26 Javascript
原生JS运动实现轮播图
2021/01/02 Javascript
react项目从新建到部署的实现示例
2021/02/19 Javascript
[01:09:20]NB vs NAVI Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
简单介绍Python中的JSON使用
2015/04/28 Python
Python实现对PPT文件进行截图操作的方法
2015/04/28 Python
Python基于正则表达式实现检查文件内容的方法【文件检索】
2017/08/30 Python
python 文件操作删除某行的实例
2017/09/04 Python
Python实现去除列表中重复元素的方法小结【4种方法】
2018/04/27 Python
python线程的几种创建方式详解
2019/08/29 Python
在django中自定义字段Field详解
2019/12/03 Python
在matplotlib中改变figure的布局和大小实例
2020/04/23 Python
python实现爱奇艺登陆密码RSA加密的方法示例详解
2020/05/27 Python
Python如何爬取51cto数据并存入MySQL
2020/08/25 Python
马歇尔耳机官网:Marshall Headphones
2020/02/04 全球购物
八年级音乐教学反思
2014/01/09 职场文书
主管竞聘书范文
2014/03/31 职场文书
教师民族团结演讲稿
2014/08/27 职场文书
赔偿协议书怎么写
2015/01/28 职场文书
世界气象日活动总结
2015/02/27 职场文书
仓库统计员岗位职责
2015/04/14 职场文书
冰雪公主观后感
2015/06/16 职场文书
联村联户简报
2015/07/21 职场文书
Java反应式框架Reactor中的Mono和Flux
2021/07/25 Java/Android
Python接口自动化之文件上传/下载接口详解
2022/04/05 Python