<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Circle</title>
<style>
* {
margin: 0;
padding: 0;
overflow: hidden;
}
body {
background: url("hoge.png");
background-size: cover;
}
</style>
</head>
<body>
<script>
;(function() {
var canvas = document.createElement("canvas"), W, H, mr, sr, mx, my, num = 6, particles = [];
canvas.style.background = "transparent";
var ctx = canvas.getContext("2d");
document.body.appendChild(canvas);
function Circle(ctx, deg) {
this.ctx = ctx;
this.deg = deg || 0;
this.h = false;
this.v = 0.2;
}
Circle.prototype = {
render : function() {
this.updatePos();
this.draw();
},
updatePos : function() {
this.x = Math.cos(Math.PI / 180 * this.deg) * this.mr + this.mx;
this.y = Math.sin(Math.PI / 180 * this.deg) * this.mr + this.my;
this.deg += this.v;
},
draw : function() {
ctx = this.ctx;
ctx.beginPath();
if (this.h) {
ctx.fillStyle = "rgba(255, 255, 255, 0.35)";
ctx.arc(this.x, this.y, this.sr + 15, 0, 360 * (Math.PI / 180), false);
ctx.fill();
} else {
ctx.strokeStyle = "rgba(255, 255, 255, 0.35)";
ctx.arc(this.x, this.y, this.sr, 0, 360 * (Math.PI / 180), false);
ctx.stroke();
}
ctx.closePath();
},
setWindow : function(W, H, mr, sr, mx, my) {
this.W = W, this.H = H, this.mr = mr, this.sr = sr,
this.mx = mx, this.my = my;
},
hover : function(mx, my) {
this.a = this.x - mx;
this.b = this.y - my;
if (this.a * this.a + this.b * this.b <= this.sr * this.sr) {
this.h = true;
return true;
} else {
this.h = false;
return false;
}
},
vSet : function(v) {
this.v = v ? 0 : 0.2;
}
};
for (var i = 0; i < num; i++) {
particle = new Circle(ctx, (360 / num) * i);
particles.push(particle);
}
function resize() {
W = canvas.width = window.innerWidth,
H = canvas.height = window.innerHeight,
mr = Math.min(W, H) / 3,
sr = Math.min(W, H) / 10,
mx = W / 2, my = H / 2;
for (j = 0; j < num; j++) {
particles[j].setWindow(W, H, mr, sr, mx, my);
}
}
function hover(e) {
var mx = e.clientX, my = e.clientY;
for (j = 0; j < num; j++) {
if (particles[j].hover(mx, my)) {
canvas.style.cursor = "pointer";
for (n = 0; n < num; n++) {
particles[n].vSet(true);
}
} else {
for (n = 0; n < num; n++) {
canvas.style.cursor = "default";
particles[n].vSet(false);
}
}
}
}
resize();
window.addEventListener("resize", resize, false);
window.addEventListener("mousemove", function(e) {
hover(e);
}, false);
(function loop() {
ctx.clearRect(0, 0, W, H);
particles.forEach(function(e) {
e.render();
});
window.requestAnimationFrame(loop);
}());
}());
</script>
</body>
</html>
いずれかのパーティクル(円)にマウスが重なった時に、
- 円を拡大して塗りつぶす
- アニメーションを止める(すべての円)
- カーソル変更
をさせたいです。
1.は実装できたのですが、2.と3.が1つのパーティクルにしか適応されなくて詰んでいます。
ご教授頂けると幸いです。。。
あと初心者のなのでクソコードだったらごめんなさい(´・ω・`)