用canvas制作绚丽小球
1、先上一张静态效果图，在线演示地址：http://www.yusian.com/vue/demo/canvas_ball2、实现思路
2.1、该demo涉及到的点有两个：ES6新特性class及继承、画布canvas中2d渲染的简单使用；
2.2、ES6中对类的定义越来越像高级语言java的特点，基本格式如：
class xxx extends xxx {
constructor() {
super();
}
}
2.3、画布2d渲染基本步骤为获取上下文、开启渲染、渲染相关、结束渲染等，这是一个面向过程编程的操作；
2.4、效果实现思路：获取画布及画布2d上下文、定义一个画圆的对象及能自动变小的方法、监听鼠标指针事件、事件触发生成对象、动态刷新画布；
3、部分js代码：// 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.render();
ballArray.update();
if (ballArray.r == 0) ballArray.splice(i, 1);
}
}, 50);
4、源代码下载**** Hidden Message *****
页:
[1]