在用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>

 

    

原文地址：https://blog.csdn.net/tangxiujiang