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