Mail.ruПочтаМой МирОдноклассникиВКонтактеИгрыЗнакомстваНовостиКалендарьОблакоЗаметкиВсе проекты

Как сделать так, чтобы canvas не закрашивал пространство, а совершал цикличное движение ?

Дашка Кактус Ученик (99), закрыт 6 месяцев назад
есть код звезд, направляющихся по круговой линии, но если в rgba(0,0,8,0) в конце выставить значение 0, фон убирается, но эти звездочки начинают закрашивать, а не просто двигаться, как быть?
Лучший ответ
del Просветленный (20236) 8 месяцев назад
Огромное коллчество примеров работы с канвасом можно найти на
https://glslsandbox.com/
Остальные ответы
Toxop Мыслитель (5746) 8 месяцев назад
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// Устанавливаем размер канваса
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const stars = []; // массив для хранения звезд

// Создаем звезды
for (let i = 0; i < 100; i++) {
stars.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
radius: Math.random() * 2,
speed: Math.random() * 0.5
});
}

function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // очищаем предыдущее состояние

// Рисуем звезды
for (let i = 0; i < stars.length; i++) {
const star = stars[i];

ctx.beginPath();
ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2);
ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
ctx.fill();

// Обновляем положение звезды
star.x += Math.cos(star.speed) * 2;
star.y += Math.sin(star.speed) * 2;

// Проверяем, чтобы звезда оставалась в пределах канваса
if (star.x < 0 || star.x > canvas.width || star.y < 0 || star.y > canvas.height) {
star.x = Math.random() * canvas.width;
star.y = Math.random() * canvas.height;
}
}

requestAnimationFrame(draw); // повторяе
м анимацию
}

draw(); // начинаем анимацию
Дашка КактусУченик (99) 8 месяцев назад
 (()=>{
let $ = c.getContext("2d"),
w = c.width = window.innerWidth,
h = c.height = window.innerHeight,
random = n=>Math.random()*n,
stars = new Array(1000).fill().map(()=>{
return {r: random(w), s: random(0.01), a: random(Math.PI*2)};
});

console.log(stars)
function loop(){
$.fillStyle = "rgba(0,0,9,0)";
$.fillRect(0,0,w,h);
stars.forEach(e=>{
e.a+=e.s;
$.beginPath();
$.arc(Math.cos(e.a)*e.r + w/2, Math.sin(e.a)*e.r + h/2, 1,0,Math.PI*2);
$.closePath();
$.fillStyle = "white";
$.fill();
})

requestAnimationFrame(loop);
}
requestAnimationFrame(loop);
window.addEventListener("resize", ()=>{
w = c.width = window.innerWidth;
h = c.height = window.innerHeight;
})
})()

а если такой код? можно его отредактировать?
Дашка Кактус, если проблема в том что каждый кадр отрисовывается поверх другого и получается шлейф вместо движения, то решение лишь в том, что предыдущий кадр нужно закрасить. Как я вижу в начале функции loop как раз это и происходит. Но т.к. цвет там выбран rgba , в котором последнее значение (альфа канал) равно нулю. Попробуй изменить данную строку на $.fillStyle("rgba(0,0,9,255")) или не использовать альфа канал вовсе: $.fillStyle("rgb(0,0,9"))
Похожие вопросы