12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758 |
- Page({
- onReady() {
- this.point = {
- x: Math.random() * 590,
- y: Math.random() * 590,
- dx: Math.random() * 10,
- dy: Math.random() * 10,
- r: Math.round(Math.random() * 255 | 0),
- g: Math.round(Math.random() * 255 | 0),
- b: Math.round(Math.random() * 255 | 0),
- };
- this.interval = setInterval(this.draw.bind(this), 17);
- this.ctx = my.createCanvasContext('canvas');
- },
- draw() {
- const { ctx } = this;
- ctx.setFillStyle('#FFF');
- ctx.fillRect(0, 0, 610, 610);
- ctx.beginPath();
- ctx.arc(this.point.x, this.point.y, 20, 0, 2 * Math.PI);
- ctx.setFillStyle('rgb(' + this.point.r + ', ' + this.point.g + ', ' + this.point.b + ')');
- ctx.fill();
- ctx.draw();
- this.point.x += this.point.dx;
- this.point.y += this.point.dy;
- if (this.point.x <= 10 || this.point.x >= 590) {
- this.point.dx = -this.point.dx;
- this.point.r = Math.round(Math.random() * 255 | 0);
- this.point.g = Math.round(Math.random() * 255 | 0);
- this.point.b = Math.round(Math.random() * 255 | 0);
- }
- if (this.point.y <= 10 || this.point.y >= 590) {
- this.point.dy = -this.point.dy;
- this.point.r = Math.round(Math.random() * 255 | 0);
- this.point.g = Math.round(Math.random() * 255 | 0);
- this.point.b = Math.round(Math.random() * 255 | 0);
- }
- },
- drawBall() {
- },
- log(e) {
- if (e.touches && e.touches[0]) {
- console.log(e.type, e.touches[0].x, e.touches[0].y);
- } else {
- console.log(e.type);
- }
- },
- onUnload() {
- clearInterval(this.interval);
- },
- });
|