在用setInterval(),getContext()出错,利用画布画图,图形变形


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>

 

    

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值