关于javascript:canvas技巧

1）定义门路汇合 Path，外面规定要害坐标点如 startPoint 和 endPoint，设置从 startPoint 挪动到 endPoint 的工夫 duration。

如下 json 对象，咱们有 6 段门路，别离进行了定义。咱们将上面这个列表汇合命名为 path。

复制代码
1 [
2 {
3 “startPoint”: {
4 “x”: 252.86249999999995,
5 “y”: 191.39166666666665
6 },
7 “endPoint”: {
8 “x”: 252.86249999999995,
9 “y”: 169.66666666666666
10 },
11 “duration”: 3000
12 },
13 {
14 “startPoint”: {
15 “x”: 251.62499999999994,
16 “y”: 169.66666666666666
17 },
18 “endPoint”: {
19 “x”: 393.52499999999986,
20 “y”: 226.2833333333333
21 },
22 “duration”: 15000
23 },
24 {
25 “startPoint”: {
26 “x”: 393.52499999999986,
27 “y”: 226.2833333333333
28 },
29 “endPoint”: {
30 “x”: 393.52499999999986,
31 “y”: 427.075
32 },
33 “duration”: 15000
34 },
35 {
36 “startPoint”: {
37 “x”: 385.6874999999999,
38 “y”: 420.4916666666667
39 },
40 “endPoint”: {
41 “x”: 385.6874999999999,
42 “y”: 407.2916666666667
43 },
44 “duration”: 3000
45 },
46 {
47 “startPoint”: {
48 “x”: 385.6874999999999,
49 “y”: 407.2916666666667
50 },
51 “endPoint”: {
52 “x”: 125.8125,
53 “y”: 421.94166666666666
54 },
55 “duration”: 15000
56 },
57 {
58 “startPoint”: {
59 “x”: 126.6375,
60 “y”: 421.94166666666666
61 },
62 “endPoint”: {
63 “x”: 126.6375,
64 “y”: 434.31666666666666
65 },
66 “duration”: 3000
67 }
68 ]
复制代码
2）每次事件循环执行代码都会计算一个坐标值

怎么计算新坐标？具体就是如下代码：

this.curTime += this.timeFreshTime;
let currentX = Easing.Linear(this.curTime, this.movePath.startPoint.x, this.movePath.endPoint.x – this.movePath.startPoint.x, this.movePath.duration);
let currentY = Easing.Linear(this.curTime, this.movePath.startPoint.y, this.movePath.endPoint.y – this.movePath.startPoint.y, this.movePath.duration);