浅谈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的问题全部内容了,希望大家多多支持我们~
相关推荐
-
js+canvas绘制五角星的方法
本文实例讲述了js+canvas绘制五角星的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xht
-
微信小程序 wxapp画布 canvas详细介绍
微信小程序 wxapp画布 canvas :最近学习微信小程序的知识,这里记录下小程序 waxpp画布canvas 的知识: canvas 属性名 类型 默认值 说明 hidden Boolean false 设置画布的显示/隐藏,hidden值为true表示隐藏,值为false表示显示 canvas-id String canvas组件的唯一标识符 binderror EventHandle 当发生错误时触发error事件,detail = { errMsg: 'something w
-
javascript html5 canvas实现可拖动省份的中国地图
本文实例分享了html5 canvas可拖动省份的中国地图实现方法,供大家参考,具体内容如下 1.数据获取 画地图需要省份边界坐标,理论上可以每次都用百度API获取数据并绘图,但为了增加效率,首先将所有坐标都获取下来并存入数据库中. 新建省份数据数组 复制代码 代码如下: var allZoneData = [{'name':'辽宁省','been':'yes','id':'01'},<span style="font-family: Arial, Helvetica, sans-seri
-
JavaScript+html5 canvas实现本地截图教程
最近有时间了解了下html5的各API,发现新浪微博的头像设置是使用canvas实现截图的,加之前段时间了解了下html5的File API使用File API 之FileReader实现文件上传<JavaScript File API文件上传预览>,更加觉得html5好玩了,想着也试试写写这功能权当学习canvas吧. 下面奉上我自己写的一个demo,代码写得比较少,很多细节不会处理.如果有不得当的地方恳请指教,谢谢啦 ^_^ ^_^ 功能实现步奏: 一.获取文件,读取文件并生成url 二.
-
快速解决Canvas.toDataURL 图片跨域的问题
如题,在将页面的图片地址进行本地输出时(Html2Canvas.js),因不同源存在跨域问题,会出现toDataURL访问权限问题: [Redirect at origin 'http://sub1.xx.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested res
-
微信小程序 Canvas增强组件实例详解及源码分享
WeZRender是一个微信小程序Canvas增强组件,基于HTML5 Canvas类库ZRender. 使用 WXML: <canvas style="width: 375px; height: 600px;" canvas-id="line-canvas-1">canvas> JS: var wezrender = require('../../lib/wezrender'); zr = wezrender.zrender.init("
-
JS+Canvas 实现下雨下雪效果
最近做了一个项目,其中有需求要实现下雨小雪的动画特效,所以在此做了个drop组件,来展现这种canvas常见的下落物体效果.在没给大家介绍正文之前,先给大家展示下效果图: 展示效果图: 下雨 下雪 看起来效果还是不错的,相对于使用创建dom元素来制作多物体位移动画, 使用canvas会更加容易快捷,以及性能会更好 调用代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U
-
javascript+HTML5 Canvas绘制转盘抽奖
之前做过的项目中,有需要抽奖转盘功能的.项目已经完工一段时间了,也没出现什么严重的bug,所以现在拎出来分享给大家. 功能需求 1.转盘要美观,转动效果流畅. 2.转盘上需要显示奖品图片,并且奖品是后台读取的照片和名字. 3.转动动画完成后要有相应提示. 4.获取的奖品具体算法在数据库里操作,前端只提供最后的效果展示. 知识要点 1.引用了一个jq插件:awardRotate,用来实现更智能化的转动(插件下载:http://www.jqcool.net/jquery-jqueryrotate.h
-
微信小程序 canvas API详解及实例代码
绘图是每个移动应用必备的技术,基本上和Android,IOS,等移动开发都是相同的,创建个上下文,给你个画布再上画,官网给的小例子都比较全了自己去看吧,drawImage时没有反应不知道是BUG还是电脑不能测试待定,http://wxopen.notedown.cn/api/api-canvas.html 屏幕就像是数学上的坐标轴,且在第四象限,以屏幕左上角为圆点,X轴向右为正向左为负,Y轴向下为正向上为负(这点和数学上相反的)以圆点为基点画个距离圆点上下50宽高100的矩形来演示canvas基
-
canvas 弹幕效果(实例分享)
话不多说,请看代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <canvas style="width: 1280px;height: 720px;background-color: rgba(0
-
canvas的神奇用法
canvas有一个神奇的方法getImageData这个玩意.它可以获取canvas内图像的没一个像素点的颜色值获取,而且可以改变. 如果你有各种滤镜的算法.那么用canvas就可以实现图片的滤镜转化,可以做成类似美图秀秀那样的功能. 使用方法: 1:先将图片导入画布. 2:var canvasData = context.getImageData(0, 0, canvas.width, canvas.height); //用这个将图片每个像素点的信息获取出来,得到一个数组.注意得到的信息不是
随机推荐
- 正则表达式m修饰符(多行匹配)
- python3 pillow生成简单验证码图片的示例
- Eclipse 误删文件的恢复与代码的恢复详解
- Java中四种遍历List的方法总结(推荐)
- Bootstrap提示框效果的实例代码
- 关于.NET Framework中的设计模式--应用策略模式为List排序
- javascript KeyDown、KeyPress和KeyUp事件的区别与联系
- 实例讲解Python中SocketServer模块处理网络请求的用法
- 详解C语言中的函数、数组与指针
- 原生js和jQuery随意改变div属性style的名称和值
- Ajax提交与传统表单提交的区别说明
- jQuery中:first-child选择器用法实例
- Redis 订阅发布_Jedis实现方法
- java设计模式之实现对象池模式示例分享
- PHP5各个版本的新功能和新特性总结
- 老生常谈C/C++内存管理
- 结合mint-ui移动端下拉加载实践方法总结
- 浅谈Node 调试工具入门教程
- 微信小程序传值以及获取值方法的详解
- JavaScript代码调试方法实例小结