当前位置: 首页 > Web前端 > JavaScript

Canvas技巧

时间:2023-03-26 23:52:22 JavaScript

1)定义路径集Path,指定startPoint、endPoint等关键坐标点,并设置从startPoint移动到endPoint的时长。在下面的json对象中,我们有6条路径,分别定义。我们将列表集合命名为路径下方。复制1[2{2{3“起点”:{4“x”:252.86249999999995,5“y”:191.39166666666666656},7端点“:“持续时间”:300012},13{14“起点”:{15“x”:251.62499999999994,16“y”:169.6666666666666617},18“终点”:{19“x”:393.524999999999986,20“y”:13333.283326,22“持续时间”:1500023},24{25“起点”:{26“x”:393.52499999999986,27“y”:226.283333333333328},29“终点”:{30“x”:393.52499999999986,31“y”:427.07532},33"duration":1500034},35{36"startPoint":{37"x":385.6874999999999,38"y":420.491666666666739},40"endPointt":{41"x":385.6874999999999,42"y":407.291666666666743},44"持续时间":300045},46{47"起点":{48"x":385.6874999999999,49"y":406.5160端点”:{52“x”:125.8125,53“y”:421.941666666666654},55“持续时间”:1500056},57{58“起点”:{59“x”:126.6375,60“y”:421.941666666666666},62"endPoint":{63"x":126.6375,64"y":434.3166666666666665},66"duration":300067}68]复制代码2)事件循环每次执行代码,会计算一个坐标值如何计算新的Coordinates?具体如下代码:this.curTime+=this.timeFreshTime;letcurrentX=Easing.Linear(this.curTime,this.movePath.startPoint.x,this.movePath.endPoint.x-this.movePath.startPoint.x,this.movePath.duration);让currentY=Easing.Linear(this.curTime,this.movePath.startPoint.y,this.movePath.endPoint.y-this.movePath.startPoint.y,this.movePath.duration);