js 面向对象问题。new 出来的对象相互影响怎么回事啊。

Question

js 文件：

    //压路机对象

    function Ylj(json){

      'use strict';

      var _this = this;

      this.timer = null;

      this.color = json.color;

      this.width = json.width;

      this.speed = json.speed;

      this.C = document.getElementById('c1'); //路径画布

      this.picStage = document.getElementById('c2'); //

      this.pic = new Image();

      this.pic.src='./img/icon-ylj.png';

      this.pGC = this.picStage.getContext('2d');

      this.GC = this.C.getContext('2d');

      this.GC.lineWidth = json.width;

      this.GC.strokeStyle = json.color;

      this.disX = json.disX;

      this.disY = json.disY;

      this.line = 0;

      this.count = 0;

      this.start = function(arr){

        _this.startDraw(_this,arr);

      };

      this.stop = function(){

        _this.stopDraw(_this);

      };

    }

    Ylj.prototype.stopDraw=function(obj){

      'use strict';

       clearTimeout(obj.timer);

    };

    Ylj.prototype.startDraw=function(obj,arr){

      'use strict';

      var C = document.getElementById('c3'); //重复路径部分画布

      var GC = C.getContext('2d');

      var x0 = obj.disX;

      var y0 = obj.disY;

      obj.GC.lineCap = 'round';

      obj.GC.globalCompositeOperation="lighter";

         // 移动到初始位置

        obj.GC.moveTo(obj.disX,obj.disY);

        obj.GC.beginPath();

        for(let i=0;i<=arr.length;i++){

          obj.timer=setTimeout(function(){

            if(i==arr.length){

              clearTimeout(obj.timer);

              obj.GC.stroke();

              obj.GC.closePath();

              return ;

            }

            //获取经纬度转换坐标值

            for(let v in arr[i]){

              if(v == 'X'){

                x0 = arr[i][v];

              }else{

                y0 = arr[i][v];

              }

            }

             // 绘制压路机图片

             obj.pGC.clearRect(0,0,obj.picStage.width,obj.picStage.height);

             // obj.pGC.rotate()

             obj.pGC.drawImage(obj.pic,x0-50,y0-70);

             // 绘制压路机经过路径

             obj.GC.lineTo(x0,y0)

          },obj.speed);

        }

    }

HTML：

let ylj1 = new Ylj({

        color:'red',

        width:30,

        speed:10,

        disX:100,

        disY:0

      });

      let ylj2 = new Ylj({

        color:'blue',

        width:30,

        speed:1000,

        disX:1000,

        disY:0

      });

      console.log(ylj1==ylj2);

    function go(){

      let timer=setTimeout(go,300);

      function go1(){

        if(arr.length==0) {

          clearTimeout(timer);

          return ;

        }

        let arr1 = arr;

        arr=[];

        ylj1.start(arr1);

        ylj2.start(arr1);

      }

     go1();

    }

    add();

    go();

ylj1和ylj2最后只有压路机2在画了，怎么回事啊，求教大神~~~~~

Answer 1

实例化出来的东西是不会互相影响的，按照你的代码逻辑，你执行的所有startDraw都会画在c3这个canvas上面，建议从这个地方入手看看。