Звёздный круг на HTML5 Canvas

Разместил: Apocalypse
1 июля 2016

Очень красивая реализация круга со звёздами, которые реагируют на движение курсора и левый клик

Для начала посмотрите ДЕМО

Моё тестирование в редакторе: КЛИК

Установка:

В любое место на нужных страницах между body и /body вставьте:

<canvas></canvas>
<p id="info"></p>

<script>
var canvas = document.querySelector("canvas"),
ctx = canvas.getContext("2d");
var ww, wh, clipSize;
var stars = [];

function Star(x, y, kaboom) {
this.scale = (Math.random() + 0.2) * 20;
this.scaleSpeed = Math.random() / 5 + 0.01;
this.x = x || Math.random() * ww;
this.y = y || Math.random() * wh;
this.vx = (Math.random() - 0.5) * (kaboom ? 10 : 4);
if (kaboom) {
this.vy = (Math.random() - 0.5) * 10;
} else {
this.vy = Math.random() * 3;
}
this.opacity = 1;
this.opacitySpeed = Math.random() / 100;
this.rotate = Math.random() * Math.PI;
this.rotateSpeed = (Math.random() - 0.5) * 0.1;
this.color = "hsl(" + (~~(Math.random() * 30) + 200) + ",60%,60%)";
this.out = [];
this.in = [];
for (var i = 0; i < 5; i++) {
var x = Math.cos(i / 5 * Math.PI * 2) * this.scale;
var y = Math.sin(i / 5 * Math.PI * 2) * this.scale;
this.out.push([x, y]);
var x = Math.cos((i + 0.5) / 5 * Math.PI * 2) * this.scale * 0.5;
var y = Math.sin((i + 0.5) / 5 * Math.PI * 2) * this.scale * 0.5;
this.in.push([x, y]);
}
this.image = document.createElement('canvas');
this.image.width = this.scale * 4;
this.image.height = this.scale * 4;
this.ctx = this.image.getContext('2d');
this.ctx.translate(this.scale * 2, this.scale * 2);
this.ctx.beginPath();
this.ctx.moveTo(this.in[0][0], this.in[0][1]);
for (var i = 0; i < 5; i++) {
this.ctx.bezierCurveTo(this.out[i][0], this.out[i][1], this.out[i][
0
], this.out[i][1], this.in[i][0], this.in[i][1]);
}
this.ctx.bezierCurveTo(this.out[0][0], this.out[0][1], this.out[0][0],
this.out[0][1], this.in[0][0], this.in[0][1]);
this.ctx.closePath();
this.ctx.fillStyle = this.color;
this.ctx.shadowColor = this.color;
this.ctx.shadowBlur = 20;
this.ctx.fill();
}
Star.prototype.draw = function(i) {
//Update
this.rotate += this.rotateSpeed;
this.scale = Math.max(0, this.scale - this.scaleSpeed);
this.vy = Math.min(10, this.vy + 0.005);
this.x += this.vx;
this.y += this.vy;
this.opacity -= this.opacitySpeed;
ctx.save();
ctx.globalAlpha = Math.max(this.opacity, 0);
ctx.translate(this.x, this.y);
ctx.scale(this.scale / 20, this.scale / 20);
ctx.rotate(this.rotate);
ctx.drawImage(this.image, -this.scale, -this.scale)
ctx.restore();
}
var mouse = {
x: window.innerWidth / 2,
y: -10
}
window.addEventListener("mousemove", function(e) {
mouse.x = e.clientX + (Math.random() - 0.5) * 25;
mouse.x = Math.min((ww - clipSize * 2) / 2 + clipSize * 2, Math.max(
mouse.x, (ww - clipSize * 2) / 2));
mouse.y = e.clientY + (Math.random() - 0.5) * 25;
});
window.addEventListener("touchmove", function(e) {
mouse.x = e.touches[0].clientX + (Math.random() - 0.5) * 25;
mouse.x = Math.min((ww - clipSize * 2) / 2 + clipSize * 2, Math.max(
mouse.x, (ww - clipSize * 2) / 2));
mouse.y = e.touches[0].clientY + (Math.random() - 0.5) * 25;
});
window.addEventListener("click", function(e) {
document.querySelector("#info").style.opacity = "0";
for (var i = 0; i < 50; i++) {
stars.push(new Star(mouse.x, mouse.y, true));
}
});
window.addEventListener("touchstart", function(e) {
document.querySelector("#info").style.opacity = "0";
for (var i = 0; i < 50; i++) {
stars.push(new Star(mouse.x, mouse.y, true));
}
});
window.addEventListener("resize", onResize);

function onResize() {
ww = canvas.width = window.innerWidth;
wh = canvas.height = window.innerHeight;
clipSize = Math.min(ww / 2 - 4, wh / 2 - 4);
ctx.shadowBlur = 20;
if (navigator.userAgent.toLowerCase().indexOf('firefox') === -1) {
ctx.globalCompositeOperation = "screen";
}
//Clip circle
ctx.arc(ww / 2, wh / 2, clipSize, 0, Math.PI * 2, false);
ctx.clip();
}
var prevA = 0;

function render(a) {
requestAnimationFrame(render);
ctx.clearRect(0, 0, ww, wh);
ctx.beginPath();
ctx.arc(ww / 2, wh / 2, clipSize, 0, Math.PI * 2, false);
ctx.fillStyle = gradient;
ctx.fill();
if (a - prevA > 20) {
stars.push(new Star(mouse.x, mouse.y));
}
for (var i = 0, j = stars.length; i < j; i++) {
var star = stars[i];
star.draw(i);
if (star.x - star.scale > ww || star.x + star.scale < 0 || star.y -
star.scale > wh || star.y + star.scale < 0 || star.opacity <= 0
) {
stars.splice(i, 1);
i--;
j--;
}
}
}
onResize();
var gradient = ctx.createRadialGradient(0, 0, 200, 100, wh / 2, ww);
gradient.addColorStop(0, "#010810");
gradient.addColorStop(1, "#2a4770");
requestAnimationFrame(render);
</script>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

var canvas = document.querySelector("canvas"),

ctx = canvas.getContext("2d");

var ww, wh, clipSize;

var stars = [];

function Star(x, y, kaboom) {

this.scale = (Math.random() + 0.2) * 20;

this.scaleSpeed = Math.random() / 5 + 0.01;

this.x = x || Math.random() * ww;

this.y = y || Math.random() * wh;

this.vx = (Math.random() - 0.5) * (kaboom ? 10 : 4);

if (kaboom) {

this.vy = (Math.random() - 0.5) * 10;

} else {

this.vy = Math.random() * 3;

}

this.opacity = 1;

this.opacitySpeed = Math.random() / 100;

this.rotate = Math.random() * Math.PI;

this.rotateSpeed = (Math.random() - 0.5) * 0.1;

this.color = "hsl(" + (~~(Math.random() * 30) + 200) + ",60%,60%)";

this.out = [];

this.in = [];

for (var i = 0; i < 5; i++) {

var x = Math.cos(i / 5 * Math.PI * 2) * this.scale;

var y = Math.sin(i / 5 * Math.PI * 2) * this.scale;

this.out.push([x, y]);

var x = Math.cos((i + 0.5) / 5 * Math.PI * 2) * this.scale * 0.5;

var y = Math.sin((i + 0.5) / 5 * Math.PI * 2) * this.scale * 0.5;

this.in.push([x, y]);

}

this.image = document.createElement('canvas');

this.image.width = this.scale * 4;

this.image.height = this.scale * 4;

this.ctx = this.image.getContext('2d');

this.ctx.translate(this.scale * 2, this.scale * 2);

this.ctx.beginPath();

this.ctx.moveTo(this.in[0][0], this.in[0][1]);

for (var i = 0; i < 5; i++) {

this.ctx.bezierCurveTo(this.out[i][0], this.out[i][1], this.out[i][

], this.out[i][1], this.in[i][0], this.in[i][1]);

}

this.ctx.bezierCurveTo(this.out[0][0], this.out[0][1], this.out[0][0],

this.out[0][1], this.in[0][0], this.in[0][1]);

this.ctx.closePath();

this.ctx.fillStyle = this.color;

this.ctx.shadowColor = this.color;

this.ctx.shadowBlur = 20;

this.ctx.fill();

}

Star.prototype.draw = function(i) {

//Update

this.rotate += this.rotateSpeed;

this.scale = Math.max(0, this.scale - this.scaleSpeed);

this.vy = Math.min(10, this.vy + 0.005);

this.x += this.vx;

this.y += this.vy;

this.opacity -= this.opacitySpeed;

ctx.save();

ctx.globalAlpha = Math.max(this.opacity, 0);

ctx.translate(this.x, this.y);

ctx.scale(this.scale / 20, this.scale / 20);

ctx.rotate(this.rotate);

ctx.drawImage(this.image, -this.scale, -this.scale)

ctx.restore();

}

var mouse = {

x: window.innerWidth / 2,

y: -10

}

window.addEventListener("mousemove", function(e) {

mouse.x = e.clientX + (Math.random() - 0.5) * 25;

mouse.x = Math.min((ww - clipSize * 2) / 2 + clipSize * 2, Math.max(

mouse.x, (ww - clipSize * 2) / 2));

mouse.y = e.clientY + (Math.random() - 0.5) * 25;

});

window.addEventListener("touchmove", function(e) {

mouse.x = e.touches[0].clientX + (Math.random() - 0.5) * 25;

mouse.x = Math.min((ww - clipSize * 2) / 2 + clipSize * 2, Math.max(

mouse.x, (ww - clipSize * 2) / 2));

mouse.y = e.touches[0].clientY + (Math.random() - 0.5) * 25;

});

window.addEventListener("click", function(e) {

document.querySelector("#info").style.opacity = "0";

for (var i = 0; i < 50; i++) {

stars.push(new Star(mouse.x, mouse.y, true));

}

});

window.addEventListener("touchstart", function(e) {

document.querySelector("#info").style.opacity = "0";

for (var i = 0; i < 50; i++) {

stars.push(new Star(mouse.x, mouse.y, true));

}

});

window.addEventListener("resize", onResize);

function onResize() {

ww = canvas.width = window.innerWidth;

wh = canvas.height = window.innerHeight;

clipSize = Math.min(ww / 2 - 4, wh / 2 - 4);

ctx.shadowBlur = 20;

if (navigator.userAgent.toLowerCase().indexOf('firefox') === -1) {

ctx.globalCompositeOperation = "screen";

}

//Clip circle

ctx.arc(ww / 2, wh / 2, clipSize, 0, Math.PI * 2, false);

ctx.clip();

}

var prevA = 0;

function render(a) {

requestAnimationFrame(render);

ctx.clearRect(0, 0, ww, wh);

ctx.beginPath();

ctx.arc(ww / 2, wh / 2, clipSize, 0, Math.PI * 2, false);

ctx.fillStyle = gradient;

ctx.fill();

if (a - prevA > 20) {

stars.push(new Star(mouse.x, mouse.y));

}

for (var i = 0, j = stars.length; i < j; i++) {

var star = stars[i];

star.draw(i);

if (star.x - star.scale > ww || star.x + star.scale < 0 || star.y -

star.scale > wh || star.y + star.scale < 0 || star.opacity <= 0

) {

stars.splice(i, 1);

i--;

j--;

}

onResize();

var gradient = ctx.createRadialGradient(0, 0, 200, 100, wh / 2, ww);

gradient.addColorStop(0, "#010810");

gradient.addColorStop(1, "#2a4770");

requestAnimationFrame(render);

</script>

Метки: Canvas Circle HTML5 Stars Звёзды Круг

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

Звёздный круг на HTML5 Canvas

Читайте также:

Посетители сайта

Панель управления

Ноябрь 2020
Пн	Вт	Ср	Чт	Пт	Сб	Вс
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30

Звёздный круг на HTML5 Canvas

Читайте также:

Огненная звезда у курсора на HTML5 Canvas

Мыльные пузыри, следующие за курсором на HTML5 Canvas

Сквозь пульсирующие молнии на HTML5 Canvas

Посетители сайта

Панель управления