Как я менял дизайн у странички ‘404 not found’

Views: 1156

Бывает, что на вашем сайте могут быть неправильно указаны адреса. Тогда выскакивает ошибка ‘404 not found’. Эта страничка поясняет о том, что адрес ссылки указан неверно. И я заметил, что у всех этих страничек с ошибкой не очень привлекательный дизайн.

Тогда я подумал — «А что если изменить эту страничку?», и начал искать различные варианты улучшения дизайна.

Для начала нужно было придумать что я там изменю, было всего три варианта:

1. Текст. Можно изменить стиль текста, шрифт, цвет, размер и т.д.
2. Анимация. Можно поставить любое готовое видио, или сделать свою на холсте.
3. Картинка. Можно найти картинку и вставить. А также нарисовать свою на холсте.

Недолго думая, я остановился на втором. Меня заинтересовала анимация как проверка моих знаний HTML5 и просто я решил что это красивее всего.

Итак, я выбрал из трех вариантов второй. Пора приступать к написанию кода!

Код html довольно прост, так как содержит всего два тэга:

Как видно, здесь теги canvas и script.

canvas — тег, предназначенный для рисования.
script — тег в который вставляют код, в данном случае javascript.

Возможно, вы заметили у тега canvas атрибут style. В этот атрибут вставляется css свойства. Я приведу ниже что каждое из них обозначает.

border: dashed; — задает вид рамки
border-color: white; — задает цвет рамки
background-color: black; — задает черный цвет фона

В тэге script есть атрибут type=’text/javascript’. Он определяет тип содержимого.

С html и css кодом разобрались, теперь перейдем к javascript! Я приведу полный код с комментариями внутри:

var canvas = document.getElementById(‘canvas’); // поиск элемента с id ‘canvas’
var ctx = canvas.getContext(«2d»); // получаем контекст рисования
var radius = 2;
var colors = [«red», «yellow», «lime», «blue», «white», «brown», «pink», «fushia»]; // массив с цветами
var Block = function (x, y, direction, color) {
this.x = x;
this.y = y;
this.direction = direction;
this.color = color;
}; // создаем конструктор Block
Block.prototype.drawBlock = function() {
var x = this.x;
var y = this.y;
var color = this.color;
ctx.fillStyle = color;
ctx.beginPath();
ctx.arc(x, y, radius, Math.PI * 2, false);
ctx.fill();
}; // создаем метод drawBlock рисующий точки
Block.prototype.go = function() {
var direction = this.direction;
var vx = Math.cos(direction) * 100;
var vy = Math.sin(direction) * 100;
this.x += vx / 50;
this.y += vy / 50;
}; // создаем метод go для движения точек в любом направлении
var blocks = []; // массив с нашими обЪектами
for (var i = 10; i >= 0; i—) {
blocks[i] = new Block(Math.random() * 480, Math.random() * 480, Math.random() * 5, colors[Math.floor(Math.random() * colors.length)]);
}; // создаем десять точек со случайными x и y координатами, а также со случайным направлением и цветом
setInterval(function () {
ctx.clearRect(0, 0, canvas.width, canvas.height)
for (var i = blocks.length — 1; i >= 0; i—) {
blocks[i].drawBlock(); // рисуем точки в координатах объектов
blocks[i].go(); // передвигаем наши объекты, и следовательно точки
if (blocks[i].x < 10) {
blocks[i].x += 10; // отталкиваем объект от стенки
blocks[i].direction = Math.random() * 6; // случайное направление
}; // проверка на столкновение с левой стенкой
if (blocks[i].y < 10) { blocks[i].y += 10; // отталкиваем объект от стенки blocks[i].direction = Math.random() * 6; // случайное направление }; // проверка на столкновение с верхней стенкой if (blocks[i].x > 490) {
blocks[i].x -= 10; // отталкиваем объект от стенки
blocks[i].direction = Math.random() * 6; // случайное направление
}; // проверка на столкновение с правой стенкой
if (blocks[i].y > 490) {
blocks[i].y -= 10; // отталкиваем объект от стенки
blocks[i].direction = Math.random() * 6; // случайное направление
}; // проверка на столкновение с нижней стенкой
};
for (var j = blocks.length — 1; j >= 0; j—) {
for (var i = blocks.length — 1; i >= 0; i—) {
var gx = (blocks[j].x) — (blocks[i].x);
var gy = (blocks[j].y) — (blocks[i].y);
if (Math.sqrt((gx * gx) + (gy * gy)) <= 100) { // находим расстояние при помощи теоремы пифагора ctx.strokeStyle = blocks[j].color; // цвет линий такой же как и у одного обьекта ctx.beginPath(); ctx.moveTo(blocks[j].x, blocks[j].y); ctx.lineTo(blocks[i].x, blocks[i].y); ctx.stroke(); // создаем линию из точки x1 и y1 в точку x2 и y2 }; }; }; }, 1) // функция setInterval выполняет код с интервалом в одну милисекунду setInterval(function () { for (var i = blocks.length — 1; i >= 0; i—) {
blocks[i].direction = Math.random() * 6
}
}, 2000)

А ниже пример:

Ссылка

Вот и все! если что, пишите в комментариях 🙂

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *