浅谈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的问题全部内容了，希望大家多多支持脚本之家~
相关文章
有时,要实现对于一篇文章的关键词部分的提示,想实现的效果比如是,当鼠标移动到这个关键词时,弹出相关的一段文字或图片的介绍。2010-01-01
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
这篇文章主要介绍了jQuery插件HighCharts实现的2D回归直线散点效果,结合实例形式分析了jQuery基于HighCharts插件绘制直线散点图形的具体相关操作步骤与实现技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下2017-03-03
jquery表单验证需要做些什么，大家知道吗？其实很简单只要做四件事情就可以顺利完成表单验证，想知道哪四件事情吗，请仔细阅读下文。2015-11-11
用jquery对表单进行客户端验证demo ，学习jquery的朋友可以参考下。2009-08-08
qq空间的一份虚拟礼物可能会让很久不曾相见的朋友拉近一些距离。那么基于jquery代码是如何实现此功能的呢？下面脚本之家小编给大家分享基于jQuery实现仿QQ空间送礼物功能代码，一起看看吧2016-05-05
选择用户是一个比较常用的功能，主要包含2个功能点（保存已选选项、显示已选用户）2014-07-07
这篇文章主要介绍了jQuery子属性过滤选择器用法,实例分析了:first-child、:last-child、:nth-child、:only-chilid等子属性过滤选择器使用技巧,需要的朋友可以参考下2015-02-02
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
这篇文章主要介绍了jQuery+css实现的点击图片放大缩小预览功能,结合实例形式分析了jQuery+css控制图片放大、缩小预览查看的相关操作技巧,需要的朋友可以参考下2020-05-05
这篇文章主要介绍了jQuery动画效果图片轮播特效，图片可以进行左右轮播，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-01-01
jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码
jquery单行滚动、批量多行滚动、文字图片翻屏滚动效果代码，需要的朋友可以参考下。2010-05-05
最新评论