版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_20087231/article/details/83339870
// 构造函数
// function Person(name, age) {
// this.name = name;
// this.age = age;
// }
// Person.prototype = {
// constructor: Person,
// print() {
// console.log('我叫' + this.name + ',今年' + this.age + '岁');
// }
// }
// let person = new Person('张三', 19);
// console.log(person);
// 通过class 面向对象
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
print() {
console.log('我叫' + this.name + ',今年' + this.age + '岁');
}
}
let person = new Person('张三', 19);
console.log(person);
person.print();
<canvas id="canvas">当前游览器不支持该版本!</canvas>
<script src="js/underscor-min.js"></script>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = 1000;
canvas.height = 600;
canvas.style.backgroundColor = '#000';
class Ball {
// 构造器
constructor(x, y, color) {
this.x = x;
this.y = y;
this.color = color;
this.r = 10;
}
// 绘制
render() {
ctx.save();
ctx.beginPath();
ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
ctx.fillStyle = this.color;
ctx.fill();
ctx.restore();
}
}
class MoveBall extends Ball {
constructor(x, y, color) {
super(x, y, color);
// 量的变化
this.dX = _.random(-5, 5);
this.dY = _.random(-5, 5);
this.dR = _.random(1, 3);
}
upDate() {
this.x += this.dX;
this.y += this.dY;
this.r -= this.dR;
if (this.r < 0) {
this.r = 0;
}
}
}
// 实例化小球
let ballArr = [];
let colorArr = ['red', 'green', 'blue', 'yellow', 'purple', 'pink', 'orange'];
// 监听鼠标移动
canvas.addEventListener('mousemove', function(e) {
ballArr.push(new MoveBall(e.offsetX, e.offsetY, colorArr[_.random(0, colorArr.length - 1)]));
console.log(ballArr);
});
// 开启定时器
setInterval(function() {
// 清屏
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 绘制
for (let i = 0; i < ballArr.length; i++) {
ballArr[i].render();
ballArr[i].upDate();
}
}, 50)