正常的情况下一般在JavaScript中使用canvas,会用到如下代码:

   var canvas=document.getElementById("canvas");
var context=canvas.getContext('2d');

最近在练习canvas时,使用了jQuery便用到了如下代码:

   var $canvas=$("#canvas");
var context=$canvas.getContext('2d');

以上代码看起来没有什么题,可是在运行的时候发现程序却无法显示

打开控制发现报错为:

Uncaught TypeError: $canvas.getContext is not a function at window.onload

后来查了下文档了解到,当时用$('#canvas')获取元素时,返回的的是一个 jQuery 的对象,并不是DOM元素,想要返回DOM元素,可以用下面的方法:

   var $canvas=$("#canvas")[0];
var context=$canvas.getContext('2d');

使用上面的方法就可以成功返回DOM元素了

在jQuery中使用canvas时遇到的问题的更多相关文章

  1. jquery中bind事件时的命名空间用法(转)

    场景:页面上的某个元素bind多个click事件处理函数,视用户的具体交互情况来决定到底使用哪个处理函数. 问题: unbind时会解绑所有的click事件,造成误伤.如果之前bind时有定义处理函数 ...

  2. 浅谈jquery中prop()和attr()

    我们都知道,一般在jquery中设置属性时要用到attr()方法,现在我们有一个效果,点击按钮切换复选框的选中状态,下面贴出html代码: <input type="checkbox& ...

  3. [转]jquery的ajax交付时“加载中”提示的处理方法

    本文转自:http://www.educity.cn/wenda/77121.html jquery的ajax提交时“加载中”提示的处理方法    方法1:使用ajaxStart方法定义一个全局的“加 ...

  4. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  5. jQuery中使用$.each()遍历数组时要注意的地方

    使用jQuery中 $.each()遍历数组,要遍历的数组不能为空(arry!="") 例如:           $.each(arry, function (i, item)  ...

  6. jquery 中的 $("#id") 与 document.getElementById("id") 的区别

    以前没注意过,认为jquery 中的 $("#air") 与 document.getElementById("air") 是一回事,指的是同一个东西.在今天写 ...

  7. jquery中$.each()的用法

    each()函数是基本上所有的框架都提供了的一个工具类函数,通过它,你可以遍历对象.数组的属性值并进行处理.jQuery和jQuery对象都实 现了该方法,对于jQuery对象,只是把each方法简单 ...

  8. [转载]Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

    本文对Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法进行了详细的总结,需要的朋友可以参考下,希望对大家有所帮助. 详细解读Jquery各Ajax函数: ...

  9. JQuery中的工具函数总结

    前提引入 前提当然也是要引入Jquery啦... <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" typ ...

随机推荐

  1. javascript第四章--面向对象的程序设计

    ① 理解对象 ② 创建对象 ③ 继承

  2. Java提高十五:容器元素比较Comparable&Comparator深入分析

    我们经常用容器来存放元素,通常而言我们是不关系容器中的元素是否有序,但有些场景可能要求容器中的元素是有序的,这个时候用ArrayList  LinkedList  Hashtable HashMap ...

  3. Python [习题] 字典扁平化

    习题: 将以下字典扁平化,输出为 target 字典格式source = {'a': {'b': 1, 'c': 2}, 'd': {'e': 3, 'f': {'g': 4}}}target = { ...

  4. 基于ESXI6.5的服务器基本配置(HP DL388 Gen 9)

    最近一段时间由于做毕业设计的原因,一直处于忙碌状态,刚做完毕业设计,导师处于项目的原因,买了一台惠普服务器(人民币1.7万),服务器自带的内存仅有16 G,硬盘也就只有600G,而且磁盘还做了raid ...

  5. Numpy数组对象的操作-索引机制、切片和迭代方法

    前几篇博文我写了数组创建和数据运算,现在我们就来看一下数组对象的操作方法.使用索引和切片的方法选择元素,还有如何数组的迭代方法. 一.索引机制 1.一维数组 In [1]: a = np.arange ...

  6. Mybatis分页插件PageHelper简单使用

    一个好的讲解mybatis的博客地址http://www.jianshu.com/nb/5226994 引言 对于使用Mybatis时,最头痛的就是写分页,需要先写一个查询count的select语句 ...

  7. jstl--->Core 核心标签库->流程控制

    jstl--->Core 核心标签库->流程控制 -->if.choose.when.otherwise  <c:if>条件判断 语法1:没有本体内容  <c:if ...

  8. heartbeat+DRBD 高可用 双机热备

    heartbeat+DRBD 高可用 双机热备 原创博文http://www.cnblogs.com/elvi/p/7658109.html ## heartbeat+DRBD 高可用 双机热备 # ...

  9. Retrofit网络请求库应用01

    PS:什么是Retrofit? 在官方文档中有这样一句话--A type-safe HTTP client for Android and Java(一个类型安全的http client库),具体的话 ...

  10. hdu 3829 Cat VS Dog 二分匹配 最大独立点集

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3829 题目大意: 给定N个猫,M个狗,P个小朋友,每个小朋友都有喜欢或者不喜欢的某猫或者某狗 管理员从 ...