|
16 | 16 | </template> |
17 | 17 |
|
18 | 18 | <script module="animate" lang="renderjs"> |
19 | | - function Ball({ |
20 | | - x, |
21 | | - y, |
22 | | - vx, |
23 | | - vy, |
24 | | - canvasWidth, |
25 | | - canvasHeight, |
26 | | - ctx |
27 | | - }) { |
| 19 | + function Ball(options) { |
| 20 | + var x = options.x |
| 21 | + var y = options.y |
| 22 | + var vx = options.vx |
| 23 | + var vy = options.vy |
| 24 | + var canvasWidth = options.canvasWidth |
| 25 | + var canvasHeight = options.canvasHeight |
| 26 | + var ctx = options.ctx |
28 | 27 | this.canvasWidth = canvasWidth |
29 | 28 | this.canvasHeight = canvasHeight |
30 | 29 | this.ctx = ctx |
|
76 | 75 |
|
77 | 76 | export default { |
78 | 77 | methods: { |
79 | | - start(newVal, oldVal, owner, ins) { |
80 | | - let canvasWidth = ins.getDataset().width, |
| 78 | + start: function(newVal, oldVal, owner, ins) { |
| 79 | + var canvasWidth = ins.getDataset().width, |
81 | 80 | canvasHeight = ins.getDataset().height, |
82 | 81 | canvasEle = document.querySelectorAll('.canvas>canvas')[0], |
83 | 82 | ctx = canvasEle.getContext('2d'), |
84 | 83 | speed = 3, |
85 | 84 | ballList = [], |
86 | 85 | layer = 3, |
87 | 86 | ballInlayer = 20 |
88 | | - for (let i = 0; i < layer; i++) { |
89 | | - let radius = getDistance(canvasWidth / 2, canvasHeight / 2) / layer * i |
90 | | - for (let j = 0; j < ballInlayer; j++) { |
91 | | - let deg = j * 2 * Math.PI / ballInlayer, |
| 87 | + for (var i = 0; i < layer; i++) { |
| 88 | + var radius = getDistance(canvasWidth / 2, canvasHeight / 2) / layer * i |
| 89 | + for (var j = 0; j < ballInlayer; j++) { |
| 90 | + var deg = j * 2 * Math.PI / ballInlayer, |
92 | 91 | sin = Math.sin(deg), |
93 | 92 | cos = Math.cos(deg), |
94 | 93 | x = radius * cos + canvasWidth / 2, |
95 | 94 | y = radius * sin + canvasHeight / 2, |
96 | 95 | vx = speed * cos, |
97 | 96 | vy = speed * sin |
98 | 97 | ballList.push(new Ball({ |
99 | | - x, |
100 | | - y, |
101 | | - vx, |
102 | | - vy, |
103 | | - canvasWidth, |
104 | | - canvasHeight, |
105 | | - ctx, |
| 98 | + x: x, |
| 99 | + y: y, |
| 100 | + vx: vx, |
| 101 | + vy: vy, |
| 102 | + canvasWidth: canvasWidth, |
| 103 | + canvasHeight: canvasHeight, |
| 104 | + ctx: ctx, |
106 | 105 | radius: 5 |
107 | 106 | })) |
108 | 107 | } |
|
0 commit comments