正常的情况下一般在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. 基础5.jQuery常用事件

    jQuery常用事件 1.bind() 方法 :为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数. 2.blur() 方法:当元素失去焦点时发生 blur 事件. 3.change() ...

  2. vue 组件中数组的更新

    今天写项目时遇到的问题,瞬间就卡在那了 来还原一下: parent.vue: <template> <div> <button @click="change&q ...

  3. python requests库学习笔记(上)

    尊重博客园原创精神,请勿转载! requests库官方使用手册地址:http://www.python-requests.org/en/master/:中文使用手册地址:http://cn.pytho ...

  4. "MySql.Data.MySqIClient.MySqlProviderSevices”违反了继承安全 性规则。派生类型必须与基类型的安全可访问性匹配或者比基类型的安 全可访问性低。 "解决方法

    写Code First 时(使用的是MySql数据库),添加好EntityFrame.MySql.Data .MySql.Data.Entity后 ,写好TestDbContext类. 运行时报出一个 ...

  5. MFC中小笔记(二)

    6.有三个API函数可以运行可执行文件WinExec.ShellExecute和CreateProcess.  关于这三者的概述总结,有好几篇,自己选择. 1.CreateProcess因为使用复杂, ...

  6. TreeSet(一)--排序

    TreeSet(一) 一.TreeSet定义:      与HashSet是基于HashMap实现一样,TreeSet同样是基于TreeMap实现的.            1)TreeSet类概述 ...

  7. webpack中实现按需加载

    webpack中的require.ensure()可以实现按需加载资源包括js,css等,它会给里面require的文件单独打包,不和主文件打包在一起,webpack会自动配置名字,如0.js,1.j ...

  8. poj 3431 Expedition 优先队列

    poj 3431 Expedition 优先队列 题目链接: http://poj.org/problem?id=2431 思路: 优先队列.对于一段能够达到的距离,优先选择其中能够加油最多的站点,这 ...

  9. codeforces #446 892A Greed 892B Wrath 892C Pride 891B Gluttony

    A  链接:http://codeforces.com/problemset/problem/892/A 签到 #include <iostream> #include <algor ...

  10. 2017蓝桥杯省赛C/C++B(补题中)

    标题:等差素数列 2,3,5,7,11,13,....是素数序列. 类似:7,37,67,97,127,157 这样完全由素数组成的等差数列,叫等差素数数列. 上边的数列公差为30,长度为6. 200 ...