Итак, я выполнил обработку js за 1 год, и я подумал, что начну с чистого javascript сейчас в режиме блокировки, я кодирую Javascript в течение 2 месяцев, и я сделал много ремиксов старых аркадные игры.
Но вчера мне было очень скучно и я подумал, эй, я мог бы сделать похожий экран загрузки. Итак, я сделал, я сделал 3 холста, один был в верхней части экрана, и был прямоугольник, который шел слева направо, и всякий раз, когда прямоугольник исчезал с экрана, я возвращал его, чтобы он снова начинался с левой стороны, этот код выглядел так:
const c = document.getElementById("loadingRect");
const ctx = c.getContext("2d");
var x = 10;
function drawSomething() {
ctx.beginPath();
ctx.rect(x, 5, 100, 5);
ctx.fillStyle = "red";
ctx.fill();
ctx.closePath();
}
function draw() {
ctx.clearRect(0,0,c.width,c.height);
drawSomething();
x+=10;
if(x>c.width) {
x=-100
}
requestAnimationFrame(draw);
}
draw();
Затем я сделал другой скрипт (только для того, чтобы мне было легче писать код). Где мне нравился загрузочный текст, который был в играх 90-х, например, Загрузка -> Загрузка. -> Загрузка .. -> Загрузка ... -> и снова. Я знаю, что, возможно, у меня есть более эффективный способ сделать это, но да.
const canvas = document.getElementById("loadingText");
const ctx2 = canvas.getContext("2d");
var time = 0;
function loadingText() {
ctx2.font = "30px Arial";
ctx2.fillText("Loading", 140, 210);
}
function dot1() {
ctx2.font = "30px Arial";
ctx2.fillText(".", 245, 210);
}
function dot2() {
ctx2.font = "30px Arial";
ctx2.fillText(".", 250, 210);
}
function dot3() {
ctx2.font = "30px Arial";
ctx2.fillText(".", 255, 210);
}
function draw2() {
ctx2.clearRect(0,0,canvas.width,canvas.height);
loadingText();
if(time >= 60) {
dot1();
}
if(time >= 120) {
dot2();
}
if(time >= 180) {
dot3();
}
if(time >= 240) {
time = 0;
}
// I could use here time++; i know
time += 1;
requestAnimationFrame(draw2);
}
draw2();
Имейте в виду, что это были два разных холста. И затем в этот день у меня была эта действительно крутая вещь, которую я хотел сделать, например, экран входа в систему Microsoft, обведите. Моя идея заключалась не в том, чтобы сделать крутой переход, а больше в моем тексте загрузки, где я делаю круги под углом 4, 90 градусов, но они должны быть такими, чтобы они начинались вверху и заканчивались справа, начинались справа и заканчивались внизу, Надеюсь, вы понимаете, поэтому я попробовал это.
const canv = document.getElementById("loadingCircle");
const ctx3 = canv.getContext("2d");
function loadingCircle1() {
ctx3.beginPath();
ctx3.arc(200, 200, 75, 0, Math.PI/2);
ctx3.stroke();
ctx3.closePath();
}
// This was my other try
function loadingCircle2() {
ctx3.beginPath();
ctx3.arc(200, 200, 75, 90, Math.PI/2);
ctx3.stroke();
ctx3.closePath();
}
// Test for now to see if they are 90 degrees
loadingCircle1();
loadingCircle2();
Но это не сработало, потому что круг не начинался сверху, снизу и слева. Там мой план был разрушен, и я попробовал разные значения через полчаса, но это просто не сработало, поэтому я пошел сюда и попросил помощи.
Я не говорю, что запрашиваю код или что-то в этом роде, я ** просто хочу узнать значения последних двух параметров в круге еще 3 раза, чтобы вместе они построили идеально круглый и красивый круг.
(простите за плохой английский sh)