在用setInterval(),getContext()出错,利用画布画图,图形变形
2017-06-19 20:58
176 查看
1、用定时器函数的时候,浏览器调试器会报错,fn函数不存在,如下面代码所示:
$(document).ready(function(){
setInterval("fn()",2000);
})
解决方法:将双引号和括号去掉,即写成:setInterval(fn,2000);
2、在jquery中,浏览器会报错,没有该对象 ,如下面代码
$(document).ready(){
var ripple_obj = $("canvas");
var obj = ripple_obj.getContext("2d"); //获取context对象
}
解决方法:jQuery()返回的是jQuery对象,而jQuery对象是没有getContext方法的,需要把jQuery对象转换成Dom对象 jQuery对象就是类数组,用数组下标可以取得Dom对象,如下面所示:
var obj = ripple_obj[0].getContext("2d");
如上面蓝色和紫色部分的区别。
3、<canvas>标签的默认大小为长300px,宽150px。
问题: 在用canvas 画图的时候,发现在css中设置画布的width和height的时候,画出的图形会变形。
原因:在设置canvas的内部样式的时候,设置的长和宽只是将画布的大小进行拉伸,但实际的像素值是不变的,即实际上是对 像素的拉伸,所以图形会变形。
解决方法:直接设置画布的内联样式,如下面所示:
<canvas width="400px" height = "500px"></canvas>
$(document).ready(function(){
setInterval("fn()",2000);
})
解决方法:将双引号和括号去掉,即写成:setInterval(fn,2000);
2、在jquery中,浏览器会报错,没有该对象 ,如下面代码
$(document).ready(){
var ripple_obj = $("canvas");
var obj = ripple_obj.getContext("2d"); //获取context对象
}
解决方法:jQuery()返回的是jQuery对象,而jQuery对象是没有getContext方法的,需要把jQuery对象转换成Dom对象 jQuery对象就是类数组,用数组下标可以取得Dom对象,如下面所示:
var obj = ripple_obj[0].getContext("2d");
如上面蓝色和紫色部分的区别。
3、<canvas>标签的默认大小为长300px,宽150px。
问题: 在用canvas 画图的时候,发现在css中设置画布的width和height的时候,画出的图形会变形。
原因:在设置canvas的内部样式的时候,设置的长和宽只是将画布的大小进行拉伸,但实际的像素值是不变的,即实际上是对 像素的拉伸,所以图形会变形。
解决方法:直接设置画布的内联样式,如下面所示:
<canvas width="400px" height = "500px"></canvas>
相关文章推荐
- ps下利用变形工具及样式打造梦幻的抽象图形
- 利用图形使标题字体变形
- Android画图 利用canvas画各种图形(点、直线、弧、圆、椭圆、文字、矩形、多边形、曲线、圆角矩形)
- 利用html5的画布canvas进行图片压缩处理
- 利用dblink调用远端DB的存储过程出错的原因
- 利用html,JavaScript计算常用图形面积
- Android画图多线程环境下图形一会儿显示一会儿不显示问题
- 在C#用GDI+实现图形图像的任意变形效果(转载)
- 利用三个点(trsf)来实现各种规则图形的实现
- [stm32] 利用uc-gui封装画图和画线函数移植51上的模拟动画
- 利用qwtplot3d绘制3维图形
- html5 canvas画图之图形随拖动而复制(有操作指示)
- 利用asp.net绘制图形语言是vb.net
- 通过程序设计几何图形、矩形、圆形、正方形几种类型,能够利用接口和多态性计算几何图形的面积和周长并显示。
- 程序设计几何图形、矩形、圆形、正方形几种类型, 能够利用接口和多态性计算几何图形的面积和周长并显示。
- 通过程序设计几何图形(Shape)、矩形(Rectangle)、圆形(Circle)、正方形(Square)几种类型, 能够利用接口和多态性计算几何图形的面积和周长并显示。
- Android自定义控件系列八:详解onMeasure()(二)--利用onMeasure测量来实现图片拉伸永不变形,解决屏幕适配问题
- 【图形界面】利用JTable和Vector历史集合类实现 数据层 表现层 数据交换
- 利用GDI+函数构造图形报表
- 利用循环输出如下图形