用canvas制作绚丽小球

Sian

1、先上一张静态效果图，在线演示地址：http://www.yusian.com/vue/demo/canvas_ball



2、实现思路
2.1、该demo涉及到的点有两个：ES6新特性class及继承、画布canvas中2d渲染的简单使用；
2.2、ES6中对类的定义越来越像高级语言java的特点，基本格式如：

[JavaScript] 纯文本查看 复制代码

class xxx extends xxx {
  constructor() {
    super();
  }
}

2.3、画布2d渲染基本步骤为获取上下文、开启渲染、渲染相关、结束渲染等，这是一个面向过程编程的操作；
2.4、效果实现思路：获取画布及画布2d上下文、定义一个画圆的对象及能自动变小的方法、监听鼠标指针事件、事件触发生成对象、动态刷新画布；

3、部分js代码：

[JavaScript] 纯文本查看 复制代码

// 1、获取当前画布
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
canvas.width = 800;
canvas.height = 600;

// 自定义类
class Ball {
  constructor(x, y, color){
    this.x = x;
    this.y = y;
    this.color = color;
    this.r = 50;
  }
  render(){
    context.save();
    context.beginPath();
    context.arc(this.x, this.y, this.r, 0, Math.PI*2);
    context.fillStyle = this.color;
    context.fill();
    context.restore();
  }
}
class MoveBall extends Ball {
  constructor(x, y, color) {
    super(x, y, color);
  }
  update(){
    this.x += sa_random(-5, 5);
    this.y += sa_random(-5, 5);
    this.r -= sa_random(1, 3);
    if (this.r < 0) this.r = 0;
  }
}

// 随机函数
function sa_random(m, n) {
  let r = Math.random(); // 0 ~ 1
  return Math.floor(r*(n-m)+m); // m ~ n
}

// 监听鼠标事件添加对象到画布
let ballArray = new Array();
canvas.addEventListener('mousemove', function(e){
  let color = 'rgb('+sa_random(0,255)+','+sa_random(0,255)+','+sa_random(0,255)+')';
  ballArray.push(new MoveBall(e.offsetX, e.offsetY, color));
});

// 定时刷新画布
setInterval(function(){
  context.clearRect(0, 0, canvas.width, canvas.height);
  for (var i = 0; i < ballArray.length; i++) {
    ballArray[i].render();
    ballArray[i].update();
      if (ballArray[i].r == 0) ballArray.splice(i, 1);
  }
}, 50);

4、源代码下载

游客，如果您要查看本帖隐藏内容请回复