chrome浏览器美化插件：让您的浏览器页面冒水泡,游小鱼儿
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
chrome浏览器美化插件：让您的浏览器页⾯冒⽔泡,游⼩鱼⼉
这是⼀个让你的浏览器冒泡泡的插件，浏览⽹页的时候仿佛置⾝于海底世界；
效果图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body, html{
margin:0;
width:100%;
height:100%;
background:#eee;
}
</style>
</head>
<body>
<script>
var imgBase64 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAH8AAAByCAYAAAB6Iw7NAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JQAAg class Bubble {
constructor(_x, _y) {
this.x = _x;
this.y = _y;
this.speedy = common.getBetween(1,4);
this.w = common.getBetween(2, 16);
this.smallB = Math.random()>0.7 ? true : false;
}
move() {
this.x += common.getBetween(0,5)-2;
this.y = this.y-this.speedy;
}
}
class Panel {
constructor() {
this.bubbles = new Array();
}
create(x, y) {
if(Math.random()>0.8) {
this.bubbles.push( new Bubble(x, y) );
}
}
calc() {
for(var b in this.bubbles) {
if(this.bubbles[b].y<0) {
this.bubbles.splice(b,1);
}else{
this.bubbles[b].move();
}
};
}
draw(eCanvas, context) {
context.clearRect(0,0,eCanvas.width,eCanvas.height);
for(var b in this.bubbles) {
// context.fillStyle = ["rgba(255,255,255,0.5)", "rgba(52,152,219,0.5)"][Math.floor(Math.random()*2)];
context.fillStyle = "rgba(255,255,255,0.5)";
context.fillStyle = "rgba(255,255,255,0.5)";
context.beginPath();
context.arc(this.bubbles[b].x, this.bubbles[b].y, this.bubbles[b].w, 0, Math.PI*2,false);
context.fill();
this.bubbles[b].smallB && this.drawEllipse(context, this.bubbles[b].x, this.bubbles[b].y, this.bubbles[b].w/4, this.bubbles[b].w/3); }
}
drawEllipse(context, x, y, a, b) {
context.save();
var r = (a > b) ? a : b;
var ratioX = a / r;
var ratioY = b / r;
var pos = [a,b,3][common.getBetween(0,2)] + 1;
context.fillStyle = "rgba(255,255,255,0.6)";
context.scale(ratioX, ratioY);
context.beginPath();
context.arc(x / ratioX - pos , y / ratioY - pos , r, 0, 2 * Math.PI, false);
context.closePath();
context.fill();
context.restore();
}
}
class BubblePanel {
constructor() {
this.createCanvas();
this.events();
}
createCanvas() {
var eCan = this.eCan = document.createElement("canvas");
document.body.appendChild(eCan);
eCan.style.top = "0";
eCan.style.left = "0";
eCan.style.position = "fixed";
eCan.style.zIndex = 100;
eCan.style.pointerEvents = "none";
this.context = eCan.getContext("2d");
this.events();
this.clientX = 0;
this.clientY = 0;
//插件canvas画图⾯板
this.panel = new Panel();
this.requestAni();
}
events() {
var _this = this;
function resize() {
_this.eCan.width = document.body.offsetWidth;
_this.eCan.height = document.body.offsetHeight;
}
window.addEventListener('resize', resize);
resize();
document.body.addEventListener("mousemove", function(ev) {
_this.clientX = ev.clientX;
_this.clientY = ev.clientY;
});
}
//⽣成泡泡＝＝》计算＝＝》》重新绘图
requestAni() {
this.panel.create(this.clientX, this.clientY);
this.panel.calc();
this.panel.draw(this.eCan, this.context);
requestAnimationFrame(this.requestAni.bind(this));
}
}
}
const common = {
getBetween : function(start , end) {
return Math.floor(Math.random()*(end-start))+start; }
}
/**
* 鱼的类
*/
class Fish {
constructor() {
//⼩鱼的地址
this.src= imgBase64;
//⼩鱼的宽度和⾼度
this.imageW = 40;
this.imageH = 40;
//⼩鱼⽬前的位置
this.nowX = 0;
this.nowY = 0;
//⼩鱼要到的地⽅
this.destX = 0;
this.destY = 0;
this.init();
}
init() {
this.img = new Image();
this.img.src = this.src;
}
}
/**
* 创建canvas，并插⼊到DOM中
*/
class Can {
constructor(el) {
var eCan = document.createElement("canvas"); el.appendChild(eCan);
eCan.style.top = "0";
eCan.style.left = "0";
eCan.style.position = "fixed";
eCan.style.zIndex = 100;
eCan.style.pointerEvents = "none";
return eCan;
}
}
/**
* 整体逻辑
*/
class Fly {
constructor(bd, window, fish, can) {
this.body = bd;
this.win = window;
this.fish = fish;
this.can = can;
this.context = this.can.getContext("2d");
this.events();
this.requestAni();
}
//绑定window的事件
events() {
var _this = this;
function move(ev) {
_this.fish.destX = ev.clientX;
_this.fish.destY = ev.clientY;
}
function resize() {
function resize() {
_this.can.width = _this.body.offsetWidth;
_this.can.height = _this.body.offsetHeight;
}
this.win.addEventListener("mousemove", move);
this.win.addEventListener('resize', resize);
resize();
}
/**
* return position X, Y;
*/
lerp(a, b, n) {
return (1 - n) * a + n * b;
}
//重复刷新，更新canvas画图
requestAni() {
var _this = this;
//计算 游到的位置
this.fish.nowX = this.lerp( this.fish.nowX, this.fish.destX,.1);
this.fish.nowY = this.lerp( this.fish.nowY, this.fish.destY-this.fish.imageH/2,.1);
//更新到画布
this.context.clearRect(0, 0 ,this.can.width, this.can.height);
this.context.save();
if(this.fish.destX<this.fish.nowX) {
this.context.drawImage(this.fish.img, this.fish.nowX , this.fish.nowY , this.fish.imageW, this.fish.imageW); }else{
this.context.scale(-1, 1);
this.context.drawImage(this.fish.img, -this.fish.nowX , this.fish.nowY , this.fish.imageW, _this.fish.imageW); }
this.context.restore();
window.requestAnimationFrame(function() {
_this.requestAni();
});
}
}
var fish = new Fish();
var can = new Can(document.body);
var fly = new Fly(document.body, window, fish, can);
new BubblePanel();
</script>
</body>
</html>
View Code
如何安装：
1:下载插件并解压出 chromeExtension.crx；
2:打开浏览器的设置，更多⼯具－> 扩展程序，或者直接打开，这个地址：
3:选中插件，左键拖拽插件到第⼆步中打开的界⾯，界⾯会出现“拖放以安装”的提⽰，然后松⼿，并再确认安装；
整体的内容分为泡泡的构造函数和鱼的构造函数；
泡泡的⽣成是利⽤canvas的API， context.arc() 画圆；
鱼的⽣成也是利⽤canvas的API， context.drawImage() 画鱼
根据⿏标移动的位置，利⽤运动效果把鱼拉过去，根据⿏标的位置画泡泡；。