Конструктор лица на HTML5

Пример интересного использования HTML5 - небольшая "игрушка" для сайта или веб проекта. Она позволяет посетителям сайта сконструировать собственный вариант картинки из готовых элементов (форма лица, глаза, нос, рот). Результат можно экспортировать как изображение. Идею можно расширить и превратить во что-то большое.

Разметка HTML

Для работы приложения нужен только элементы canvas и изображения (для экспорта готового результата):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
    <title>lesson</title>
  </head>
  <body>
    <p>Пример интересного использования HTML5 - небольшая "игрушка" для
      сайта или веб проекта. Она позволяет посетителям сайта
      сконструировать собственный вариант картинки из готовых элементов
      (форма лица, глаза, нос, рот). Результат можно экспортировать как
      изображение. Идею можно расширить и превратить во что-то большое.</p>
    <p><br>
    </p>
    <h2>Разметка HTML</h2>
    <p>Для работы приложения нужен только элементы <code>canvas</code>
      и изображения (для экспорта готового результата):</p>
    <p><br>
    </p>
  </body>
</html>

JavaScript

Функционал приложения реализуется в коде JavaScript:

// Внутренние переменные
var canvas, ctx;
var oHead, oEye, oNose, oMouth;
var iSel = 0;
// -------------------------------------------------------------

// Объекты (части лица) :
function Head(x, y, x2, y2, w, h, image) {
    this.x = x;
    this.y = y;
    this.x2 = x2;
    this.y2 = y2;
    this.w = w;
    this.h = h;
    this.image = image;
    this.iSpr = 0;
}
function Eye(x, y, x2, y2, w, h, image) {
    this.x = x;
    this.y = y;
    this.x2 = x2;
    this.y2 = y2;
    this.w = w;
    this.h = h;
    this.image = image;
    this.iSpr = 0;
}
function Nose(x, y, x2, y2, w, h, image) {
    this.x = x;
    this.y = y;
    this.x2 = x2;
    this.y2 = y2;
    this.w = w;
    this.h = h;
    this.image = image;
    this.iSpr = 0;
}
function Mouth(x, y, x2, y2, w, h, image) {
    this.x = x;
    this.y = y;
    this.x2 = x2;
    this.y2 = y2;
    this.w = w;
    this.h = h;
    this.image = image;
    this.iSpr = 0;
}
// -------------------------------------------------------------

// Функции рисования :
function clear() { // Очистка элемента canvas
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}

function drawScene() { // Вывод основной сцены
    clear(); // Очистка элемента canvas

    // Рисуем голову
    ctx.drawImage(oHead.image, oHead.x2 + oHead.iSpr*oHead.w, oHead.y2, oHead.w, oHead.h, oHead.x, oHead.y, oHead.w, oHead.h);

    // Рисуем глаза
    ctx.drawImage(oEye.image, oEye.x2 + oEye.iSpr*oEye.w, oEye.y2, oEye.w, oEye.h, oEye.x, oEye.y, oEye.w, oEye.h);

    // Рисуем нос
    ctx.drawImage(oNose.image, oNose.x2 + oNose.iSpr*oNose.w, oNose.y2, oNose.w, oNose.h, oNose.x, oNose.y, oNose.w, oNose.h);

    // Рисуем рот
    ctx.drawImage(oMouth.image, oMouth.x2 + oMouth.iSpr*oMouth.w, oMouth.y2, oMouth.w, oMouth.h, oMouth.x, oMouth.y, oMouth.w, oMouth.h);


    // Рисуем элементы управления
    ctx.textAlign = 'center';
    ctx.fillStyle = '#000';

    ctx.font = '30px Verdana';
    if (iSel == 0)
        ctx.font = 'bold 30px Verdana';
    ctx.fillText('< Голова >', 400, 80);

    ctx.font = '30px Verdana';
    if (iSel == 1)
        ctx.font = 'bold 30px Verdana';
    ctx.fillText('< Глаза >', 400, 180);

    ctx.font = '30px Verdana';
    if (iSel == 2)
        ctx.font = 'bold 30px Verdana';
    ctx.fillText('< Нос >', 400, 280);

    ctx.font = '30px Verdana';
    if (iSel == 3)
        ctx.font = 'bold 30px Verdana';
    ctx.fillText('< Рот >', 400, 380);
}

// -------------------------------------------------------------

// Инициализация
$(function(){
    canvas = document.getElementById('scene');
    ctx = canvas.getContext('2d');

    // Инициализация изображения
    var oHeadImage = new Image();
    oHeadImage.src = 'images/image.png';
    oHeadImage.onload = function() {};

    oHead = new Head(0, 0, 0, 755, 300, 405, oHeadImage);
    oEye = new Eye(40, 70, 0, 120, 235, 80, oHeadImage);
    oNose = new Nose(70, 120, 0, 276, 180, 140, oHeadImage);
    oMouth = new Mouth(60, 260, 0, 546, 170, 120, oHeadImage);

    $(window).keydown(function(event){ 
        switch (event.keyCode) {
            case 38: // Клавиша "вниз"
                iSel--;
                if (iSel < 0) {
                    iSel = 3;
                }
                break;
            case 40: // Клавиша "вверх"
                iSel++;
                if (iSel >= 4) {
                    iSel = 0;
                }
                break;
            case 37: // Клавиша "влево"

                // Обновление позиции спрайта
                if (iSel == 0) {
                    oHead.iSpr--;
                    if (oHead.iSpr < 0) {
                        oHead.iSpr = 3;
                    }
                }
                if (iSel == 1) {
                    oEye.iSpr--;
                    if (oEye.iSpr < 0) {
                        oEye.iSpr = 4;
                    }
                }
                if (iSel == 2) {
                    oNose.iSpr--;
                    if (oNose.iSpr < 0) {
                        oNose.iSpr = 4;
                    }
                }
                if (iSel == 3) {
                    oMouth.iSpr--;
                    if (oMouth.iSpr < 0) {
                        oMouth.iSpr = 4;
                    }
                }
                break;
            case 39: // Клавиша "вправо"

                // Обновление позиции спрайта
                if (iSel == 0) {
                    oHead.iSpr++;
                    if (oHead.iSpr >= 4) {
                        oHead.iSpr = 0;
                    }
                }
                if (iSel == 1) {
                    oEye.iSpr++;
                    if (oEye.iSpr >= 5) {
                        oEye.iSpr = 0;
                    }
                }
                if (iSel == 2) {
                    oNose.iSpr++;
                    if (oNose.iSpr >= 5) {
                        oNose.iSpr = 0;
                    }
                }
                if (iSel == 3) {
                    oMouth.iSpr++;
                    if (oMouth.iSpr >= 5) {
                        oMouth.iSpr = 0;
                    }
                }
                break;

            case 32: // Клавиша "пробел" - экспорт результата
                var temp_ctx, temp_canvas;
                temp_canvas = document.createElement('canvas');
                temp_ctx = temp_canvas.getContext('2d');
                temp_canvas.width = 360;
                temp_canvas.height = 410;

                // Рисуем голову
                temp_ctx.drawImage(oHead.image, oHead.iSpr*oHead.w, oHead.y2, oHead.w, oHead.h, oHead.x, oHead.y, oHead.w, oHead.h);

                // Рисуем глаза
                temp_ctx.drawImage(oEye.image, oEye.iSpr*oEye.w, oEye.y2, oEye.w, oEye.h, oEye.x, oEye.y, oEye.w, oEye.h);

                // Рисуем нос
                temp_ctx.drawImage(oNose.image, oNose.iSpr*oNose.w, oNose.y2, oNose.w, oNose.h, oNose.x, oNose.y, oNose.w, oNose.h);

                // Рисуем рот
                temp_ctx.drawImage(oMouth.image, oMouth.iSpr*oMouth.w, oMouth.y2, oMouth.w, oMouth.h, oMouth.x, oMouth.y, oMouth.w, oMouth.h);

                var vData = temp_canvas.toDataURL();
                $('#face_result').attr('src', vData);
                break;
        }
    }); 

    setInterval(drawScene, 40); // Повторяем drawScene
});

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.script-tutorials.com/html5-face-builder/
Перевел: Сергей Фастунов
Урок создан: 6 Июня 2012
Просмотров: 28776
Правила перепечатки

5 последних уроков рубрики "HTML и DHTML"

Лайфхак: наиполезнейшая функция var_export()

При написании или отладки PHP скриптов мы частенько пользуемся функциями var_dump() и print_r() для вывода предварительных данных массив и объектов. В этом посте я бы хотел рассказать вам о функции var_export(), которая может преобразовать массив в формат, пригодный для PHP кода.
17 бесплатных шаблонов админок

Парочка бесплатных шаблонов панелей администрирования.
30 сайтов для скачки бесплатных шаблонов почтовых писем

Создание шаблона для письма не такое уж простое дело. Предлагаем вам подборку из 30 сайтов, где можно бесплатно скачать подобные шаблоны на любой вкус.
Как осуществить задержку при нажатии клавиши с помощью jQuery?

К примеру у вас есть поле поиска, которое обрабатывается при каждом нажатии клавиши клавиатуры. Если кто-то захочет написать слово Windows, AJAX запрос будет отправлен по следующим фрагментам: W, Wi, Win, Wind, Windo, Window, Windows. Проблема?.
15 новых сайтов для скачивания бесплатных фото

Подборка из 15 новых сайтов, где можно скачать бесплатные фотографии для заполнения своих сайтов.

Зарегистрируйтесь или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете

6 Июня 2012 12:03
MASTER_7

Поржал =)
6 Июня 2012 15:09
dv27

Мдаа...не успеваю всё осваивать..хрен угонишся за прогрессом
6 Июня 2012 18:25
Andreev0310

Клево!:)
6 Июня 2012 21:04
alexa.kuchera

Good :-)
6 Июня 2012 21:30
Евгений Кондрашов

Порадовало! Столько вещей, столько способов их применения... Согласенс dv27, хрен угнаться:D
6 Июня 2012 22:27
Ygreec

Гуд
7 Июня 2012 09:12
Morani

там грамматическая ошибка в демке. Вместо виДа написанно виЖа.
7 Июня 2012 14:09
mccrush

Дамммм... Интересно... Теперь осталось придумать, что с этим можно сделать))
7 Июня 2012 15:00
rubyx

ну и рожа :)) я не понял какая польза от этого урока?
- 8 Июня 2012 00:04
  rymaruk
  
  ты js переглянь, и поймешь пользу))))
7 Июня 2012 17:47
ARYL

Статью следовало назвать ”Конструктор лица на JavaScript”, HTML в данном случае как аппендикс.
7 Июня 2012 22:42
stanovova

Очень весело! Спасибо!
8 Июня 2012 00:05
rymaruk

Супер, спасибо))!
8 Июня 2012 23:53
Ольга Чеснокова

Прикольно !
12 Июня 2012 00:01
anikey99

Демка не работает ( видимо из-за "жива"
15 Июня 2012 13:28
robot16

Какими быстрыми темпами все развивается! Не успеваю выучить одну технологию или приемы, как тут же появляются другие. Понравилось очень, не думал, что можно такое сделать.
25 Марта 2013 13:56
Webstern_Digital

при правильном подходе можно сверстать довольно интересеные мини сервисы, приколюхи и прочее...
Комментарий удален
- 6 Июня 2012 22:03
  la2haa
  
  Отлично, бугагашеньки!

Конструктор лица на HTML5

Разметка HTML

JavaScript

5 последних уроков рубрики "HTML и DHTML"

MASTER_7

dv27

Andreev0310

alexa.kuchera

Евгений Кондрашов

Ygreec

Morani

mccrush

rubyx

rymaruk

ARYL

stanovova

rymaruk

Ольга Чеснокова

anikey99

robot16

Webstern_Digital

la2haa