js 文件:? ? //壓路機(jī)對(duì)象? ? 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'); //重復(fù)路徑部分畫布? ? ? var GC = C.getContext('2d');? ? ? var x0 = obj.disX;? ? ? var y0 = obj.disY;? ? ? obj.GC.lineCap = 'round';? ? ? obj.GC.globalCompositeOperation="lighter";? ? ? ? ?// 移動(dòng)到初始位置? ? ? ? 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 ;? ? ? ? ? ? }? ? ? ? ? ? //獲取經(jīng)緯度轉(zhuǎn)換坐標(biāo)值? ? ? ? ? ? for(let v in arr[i]){? ? ? ? ? ? ? if(v == 'X'){? ? ? ? ? ? ? ? x0 = arr[i][v];? ? ? ? ? ? ? }else{? ? ? ? ? ? ? ? y0 = arr[i][v];? ? ? ? ? ? ? }? ? ? ? ? ? }? ? ? ? ? ? ?// 繪制壓路機(jī)圖片? ? ? ? ? ? ?obj.pGC.clearRect(0,0,obj.picStage.width,obj.picStage.height);? ? ? ? ? ? ?// obj.pGC.rotate()? ? ? ? ? ? ?obj.pGC.drawImage(obj.pic,x0-50,y0-70);? ? ? ? ? ? ?// 繪制壓路機(jī)經(jīng)過(guò)路徑? ? ? ? ? ? ?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最后只有壓路機(jī)2在畫了,怎么回事啊,求教大神~~~~~
js 面向?qū)ο髥?wèn)題。new 出來(lái)的對(duì)象相互影響怎么回事啊。
慕粉1469491289
2017-09-26 14:38:00