正常的情况下一般在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. [OIDC in Action] 1. 基于OIDC(OpenID Connect)的SSO

    在[认证授权]系列博客中,分别对OAuth2和OIDC在理论概念方面进行了解释说明,其间虽然我有写过一个完整的示例(https://github.com/linianhui/oidc.example) ...

  2. python学习笔记 改变字符串中的某一位

    a = ' a = list(a) a[2] = ' news = ''.join(a) print news,a 注意不能使用 news = '' news.join(a) 因为news.join只 ...

  3. 【深度学习系列】用PaddlePaddle和Tensorflow进行图像分类

    上个月发布了四篇文章,主要讲了深度学习中的"hello world"----mnist图像识别,以及卷积神经网络的原理详解,包括基本原理.自己手写CNN和paddlepaddle的 ...

  4. js监听浏览器离开页面操作

    序言 大家是否经常遇到在关闭网页的时候,会看到一个确定是否离开当前页面的提示框?想一些在线测试系统.信息录入系统等就经常会有这一些提示,避免用户有意或者无意中关掉了页面,导致数据丢失.这里面的实现过程 ...

  5. Mybatis分页插件PageHelper使用

    一. Mybatis分页插件PageHelper使用  1.不使用插件如何分页: 使用mybatis实现: 1)接口: List<Student> selectStudent(Map< ...

  6. Angular自定义组件实现数据双向数据绑定

    学过Angular的同学都知道,输入框通过[(ngModel)]实现双向数据绑定,那么自定义组件能不能实现双向数据绑定呢?答案是肯定的. Angular中,我们常常需要通过方括号[]和圆括号()实现组 ...

  7. C# 使用Task实现任务超时,多任务一起执行

    简介:充分使用Task的异步功能代码实现:1.实现了任务超时 退出任务 2.多个任务一起执行 /// <summary>        ///做事 需要 ms秒 才能完成        / ...

  8. zzuli 1815: easy problem 打表

    1815: easy problem Time Limit: 1 Sec  Memory Limit: 128 MB Submit: 243  Solved: 108 SubmitStatusWeb ...

  9. Nodejs学习笔记(十七)--- 浮点运算decimal.js

    目录 前言 JavaScript加减乘除运算 decimal.js加减乘除运算 前言 开发过程中免不了有浮点运算,JavaScript浮点运算的精度问题会带来一些困扰 JavaScript 只有一种数 ...

  10. jq,返回上一页,小记history.back(-1)和history.go(-1)区别

    <input type="button" name="back" value="重新填写" onclick="javascr ...