便利贴--13{随鼠标移动的canvas,未完成}
canvas
class manyPoint {
constructor(val) {}
}
class mouseAround {
constructor(val) {
this.num = val.num;
this.size = val.size > val.aroundSize ? val.aroundSize : val.size;
this.aroundSize = val.aroundSize;
this.mouse = { x: +val.aroundSize / 2, y: +val.aroundSize / 2 };
this.mouseType = this._isMobile() ? "touchmove" : "mousemove";
this.ourData = [];
this.canvas = null;
this.see = false;
this.ctx = null;
this.init();
}
_isMobile() {
const flag = navigator.userAgent.match(
/(phone|pad|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows phone)/i
);
return flag;
}
init() {
this.createCanvas();
this.mouseMove(this.mouseType);
this.createBall();
}
createCanvas() {
let that = this;
this.canvas = document.createElement("canvas");
this.canvas.style.position = "absolute";
this.canvas.style.backgroundColor = "transparent";
this.canvas.style.zIndex = "99999999";
this.canvas.style.top = "0px";
this.canvas.style.left = "0px";
this.canvas.style.width = this.aroundSize + "px";
this.canvas.style.height = this.aroundSize + "px";
this.canvas.style.border = "1px solid red";
document.querySelector("body").appendChild(this.canvas);
this.ctx = this.canvas.getContext("2d");
}
createBall() {
let that = this;
this.ourData = [];
for (let i = 0; i < this.num; i++) {
let color = this.getColor();
let d = new manyPoint({
x: +that.mouse.x,
y: +that.mouse.y,
color: color,
radius: that.size,
theta: that.randomDoubleFromRange(0, 2 * Math.PI),
speed: 0.05,
ctx: that.ctx,
distance: that.getRandom(70, 90),
});
this.ourData.push(d);
}
}
mouseMove(type) {
let that = this;
window.addEventListener(type, function (window) {
let x = window.clientX || window.changedTouches[0].clientX;
let y = window.clientY || window.changedTouches[0].clientY;
that.mouse.x = x;
that.mouse.y = y;
that.canvas.style.top = +y - +that.aroundSize / 2 + "px";
that.canvas.style.left = +x - +that.aroundSize / 2 + "px";
});
window.addEventListener(
type == "touchmove" ? "touchstart" : "mouseover",
function (window) {
let x = window.clientX || window.changedTouches[0].clientX;
let y = window.clientY || window.changedTouches[0].clientY;
that.mouse.x = x;
that.mouse.y = y;
that.canvas.style.top = +y - +that.aroundSize / 2 + "px";
that.canvas.style.left = +x - +that.aroundSize / 2 + "px";
that.see = true;
that.ctx.fillStyle = that.getColor();
that.ctx.beginPath();
that.ctx.arc(20, 20, 20, 0, Math.PI * 2, true);
that.ctx.closePath();
that.ctx.fill();
}
);
window.addEventListener(
type == "touchmove" ? "touchend" : "mouseout",
function (window) {
that.see = false;
}
);
}
drawActive() {
let that = this;
let draws = () => {
that.ctx.fillStyle = "rgba(255, 255, 255, 0)";
that.ctx.fillRect(0, 0, that.canvas.width, that.canvas.height);
for (var p of that.ourData) {
this.drawPoint(p);
}
};
setInterval(() => {
draws();
}, 10);
}
getPosition() {
let data = { x: "", y: "" };
return data;
}
getRandom(a, b) {
b++;
return Math.floor(Math.random() * Math.abs(a - b)) + Math.min(a, b);
}
getColor() {
var color = "#";
for (var i = 0; i < 3; i++) {
var hex = this.getRandom(0, 255).toString(16);
color += hex.length === 1 ? "0" + hex : hex;
}
return color;
}
randomDoubleFromRange(a, b) {
return Math.random() * Math.abs(a - b) + Math.min(a, b);
}
}
const setcc = {
state: {},
mutations: {},
actions: {
mouseAroundInit() {
let mouse = new mouseAround({ num: 1, size: 20, aroundSize: 100 });
},
},
};
export default setcc;