|
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