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

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

demosourse

 

Разметка 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
Просмотров: 28735
Правила перепечатки


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

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 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
      Отлично, бугагашеньки!
^ Наверх ^