canvas.js 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. Page({
  2. onReady() {
  3. this.point = {
  4. x: Math.random() * 590,
  5. y: Math.random() * 590,
  6. dx: Math.random() * 10,
  7. dy: Math.random() * 10,
  8. r: Math.round(Math.random() * 255 | 0),
  9. g: Math.round(Math.random() * 255 | 0),
  10. b: Math.round(Math.random() * 255 | 0),
  11. };
  12. this.interval = setInterval(this.draw.bind(this), 17);
  13. this.ctx = my.createCanvasContext('canvas');
  14. },
  15. draw() {
  16. const { ctx } = this;
  17. ctx.setFillStyle('#FFF');
  18. ctx.fillRect(0, 0, 610, 610);
  19. ctx.beginPath();
  20. ctx.arc(this.point.x, this.point.y, 20, 0, 2 * Math.PI);
  21. ctx.setFillStyle('rgb(' + this.point.r + ', ' + this.point.g + ', ' + this.point.b + ')');
  22. ctx.fill();
  23. ctx.draw();
  24. this.point.x += this.point.dx;
  25. this.point.y += this.point.dy;
  26. if (this.point.x <= 10 || this.point.x >= 590) {
  27. this.point.dx = -this.point.dx;
  28. this.point.r = Math.round(Math.random() * 255 | 0);
  29. this.point.g = Math.round(Math.random() * 255 | 0);
  30. this.point.b = Math.round(Math.random() * 255 | 0);
  31. }
  32. if (this.point.y <= 10 || this.point.y >= 590) {
  33. this.point.dy = -this.point.dy;
  34. this.point.r = Math.round(Math.random() * 255 | 0);
  35. this.point.g = Math.round(Math.random() * 255 | 0);
  36. this.point.b = Math.round(Math.random() * 255 | 0);
  37. }
  38. },
  39. drawBall() {
  40. },
  41. log(e) {
  42. if (e.touches && e.touches[0]) {
  43. console.log(e.type, e.touches[0].x, e.touches[0].y);
  44. } else {
  45. console.log(e.type);
  46. }
  47. },
  48. onUnload() {
  49. clearInterval(this.interval);
  50. },
  51. });