大致效果
总结:就是有很多的小球,当我们鼠标划过的时候小球就变大,当鼠标移走的时候小球就会变小。关于颜色我们可以去这个网站:http://www.peise.net/。在这里查找好看的颜色。前端面试找工作建议去这个网站:https://www.lagou.com/。
(1)首先写个画布即canvas
<canvas id="bubble"></canvas>
(2)让canvas铺满整个画布,就要获得浏览器的宽度和高度
var w = window.innerWidth;
var h = window.innerHeight;
(3)由于浏览器随时会变大变小于是我们监控浏览器的大小然后改变canvas的大小
window.onresize = function() {
w = window.innerWidth;
h = window.innerHeight;
canvas.width = w;
canvas.height = h;
}
(4)整个过程大量的需要随机数于是我们封装一个函数用于货的随机数
function random(min, max) { //返回一个Min到max的值
return Math.random() * (max - min) + min;
}
(5)整个过程有很多的小球。于是我们面向对象我们封装一个小球(我们知道一个小球都有哪些属性然后把他们封装在一个对象中)
function Bubble() {
}
(6)我们都知道一个人是有基因链于是就相当于小球的原型链于是:
Bubble.prototype = {
init: function() {
this.x = random(0, w); //泡泡生成的x的位置
this.y = random(0, h);
this.r = random(3, 5);
this