Навигационное меню в элементе HTML5 canvas

Навигационное меню в HTML5 можно построить прямо в элементе canvas. В демонстрации также формируется эффект пламени.

Потребуется единственный элемент canvas и одно изображение.

<!DOCTYPE html>
<html lang="ru" >
    <head>
        <meta charset="utf-8" />
        <title>Навгиационное меню на элементе canvas HTML5 с эффектом пламени | Материалы сайта RUSELLER.COM</title>
        <link rel="stylesheet" href="/css/main.css" type="text/css" />
        <script src="/js/vector2d.js"></script>
        <script src="/js/fire_menu.js"></script>
    </head>
    <body>
        <header>
            <h2>Навигационное меню с эфектом огня</h2>
            <a href="http://www.ruseller.com" class="stuts" target="_blank">Материалы сайта <span>RUSELLER.COM</span></a>
        </header>

        <canvas id="panel" width="1000px" height="100px">Для работы нужен браузер, поддерживающий HTML5</canvas>
        <img id="image" src="/images/bg.jpg"  />
    </body>
</html>

Весь функционал нашего меню формируется в JavaScript коде. Мы добавляем несколько кнопок, привязываем к ним обработчики событий и формируем эффект пламени.

// Объект кнопки
function Button(x, y, w, h, state, image, text) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.state = state;
    this.imageShift = 0;
    this.image = image;
    this.text = text;
}

// Функция вывода кнопки
function drawButton(ctx, button) {
    // Выводим изображение кнопки
    ctx.drawImage(button.image, 0, button.imageShift, button.w, button.h, button.x, button.y, button.w, button.h);

    // и текст
    ctx.fillText(button.text, button.x + button.w / 2, 5 + button.y + button.h / 2);
}

// Получаем положение курсора мыши
function getMousePosition(e){
    if (!e){
        var e = window.event;
    } 
    if (e.pageX || e.pageY){
        return new vector2d(e.pageX, e.pageY);
    } else if (e.clientX || e.clientY){
        return new vector2d(e.clientX, e.clientY);
    } 
}

// Внутренние переменные
var canvas, ctx;
var data_width;
var data_height;
var colors = [];
var out_data = [];
var buttons = [];

// Заполняем массив определенными значениями
function fill_new_array(len, val) {
    var rv = new Array(len);
    while (--len >= 0) {
        rv[len] = val;
    }
    return rv;
}

// Подготавливаем палитру
function prepare_palette() {
    for (var i = 0; i < 64; ++i) {
        colors[i + 0] = {r: 0, g: 0, b: i << 1, a: i};
        colors[i + 64] = {r: i << 3, g: 0, b: 128 - (i << 2), a: i+64};
        colors[i + 128] = {r: 255, g: i << 1, b: 0, a: i+128};
        colors[i + 192] = {r: 255, g: 255, b: i << 2, a: i+192};
    }
}

// Вывод основной сцены
function drawScene() {
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); // Очистка элемента 

    // Выводим огонь
    var data_cnt = data_width * (data_height - 1);
    for (var i = 0; i < data_width; i++) {
        out_data[data_cnt + i] = (0.6 > Math.random()) ? 255 : 20;
    }
    for (var y = 0; y < 100; y++){
        for (var x = 10; x < data_width - 10; x++){
            var s = data_cnt + x;

            var temp_data = out_data[s] + out_data[s + 1] + out_data[s - 1] + out_data[s - data_width];
            temp_data >>= 2;
            if (temp_data > 1){
                temp_data -= 1;
            }
            temp_data <<= 0;
            
            out_data[s - data_width] = temp_data;
            
            var id = s << 2;
            img_data.data[id + 0] = colors[temp_data].r;
            img_data.data[id + 1] = colors[temp_data].g;
            img_data.data[id + 2] = colors[temp_data].b;
            img_data.data[id + 3] = colors[temp_data].a;
        }
        data_cnt -= data_width;
    }
    ctx.putImageData(img_data, 0, 0);

    // Подготоваливаем шрифт
    ctx.font = '26px DS-Digital';
    ctx.fillStyle = '#000000';
    ctx.textAlign = "center";

    // Выводим все кнопки
    for (var ib = 0; ib < buttons.length; ib++) { //
        drawButton(ctx, buttons[ib]);
    }
}

// Обработчик события Window Onload
if (window.attachEvent) {
    window.attachEvent('onload', main_init);
} else {
    if(window.onload) {
        var curronload = window.onload;
        var newonload = function() {
            curronload();
            main_init();
        };
        window.onload = newonload;
    } else {
        window.onload = main_init;
    }
}

// Инициализация
function main_init() {

    // Создаем объекты canvas и context
    canvas = document.getElementById('panel');
    ctx = canvas.getContext('2d');

    // Готовим данные для огня и палитру
    img_data = ctx.createImageData(canvas.width, canvas.height);
    data_width = img_data.width,
    data_height = img_data.height,
    prepare_palette();

    // Заполняем новый массив 0
    out_data = fill_new_array(data_width * data_height, 0)

    // Подготавливаем изображения кнопок
    var buttonImage = new Image();
    buttonImage.src = 'images/button.png';
    buttonImage.onload = function() {};

    // Подготавливаем 3 разных кнопки
    buttons.push(new Button(0, 10, 245, 62, 'normal', buttonImage, 'Кнопка #1'));
    buttons.push(new Button(250, 10, 245, 62, 'normal', buttonImage, 'Кнопка #2'));
    buttons.push(new Button(500, 10, 245, 62, 'normal', buttonImage, 'Кнопка #3'));
    buttons.push(new Button(750, 10, 245, 62, 'normal', buttonImage, 'Кнопка #4'));

    // Цикл для основной сцены
    setInterval(drawScene, 40);

    // обработчик события Onmousemove
    canvas.onmousemove = function(e) {
        var mouse = getMousePosition(e).sub(new vector2d(canvas.offsetLeft, canvas.offsetTop));

        for (var i = 0; i < buttons.length; i++) { // Применяем состояние 'hover' для кнопки
            if (buttons[i].state != 'pressed') {
                buttons[i].state = 'normal';
                buttons[i].imageShift = 0;
                if (mouse.x > buttons[i].x && mouse.x < buttons[i].x+buttons[i].w && mouse.y > buttons[i].y && mouse.y < buttons[i].y+buttons[i].h) {
                    buttons[i].state = 'hover';
                    buttons[i].imageShift = 136;
                }
            }
        }
    }

    // Обработчик события Onmousedown
    canvas.onmousedown = function(e) {
        var mouse = getMousePosition(e).sub(new vector2d(canvas.offsetLeft, canvas.offsetTop));

        for (var i = 0; i < buttons.length; i++) { // Применяем состояние 'pressed' для кнопки
            if (mouse.x > buttons[i].x && mouse.x < buttons[i].x+buttons[i].w && mouse.y > buttons[i].y && mouse.y < buttons[i].y+buttons[i].h) {
                buttons[i].state = 'pressed';
                buttons[i].imageShift = 68;
            }
        }
    }

    // Оработчик события Onmouseup
    canvas.onmouseup = function(e) {
        var mouse = getMousePosition(e).sub(new vector2d(canvas.offsetLeft, canvas.offsetTop));

        for (var i = 0; i < buttons.length; i++) { // Сброс состояний кнопки
            if (mouse.x > buttons[i].x && mouse.x < buttons[i].x+buttons[i].w && mouse.y > buttons[i].y && mouse.y < buttons[i].y+buttons[i].h) {
                alert(buttons[i].text + ' нажата.');
            }

            buttons[i].state = 'normal';
            buttons[i].imageShift = 0;
        }
    }
}

Подобные эксперименты могут привести к новым идеям в организации интерфейса приложения.

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/EN9mI55icI8/lessons.php

Читать комменты и комментировать

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



Защитный код
Обновить

Навигационное меню в элементе HTML5 canvas | | 2012-06-19 11:57:38 | | Статьи Web-мастеру | | Навигационное меню в HTML5 можно построить прямо в элементе canvas. В демонстрации также формируется эффект пламени.Потребуется единственный элемент canvas и одно изображение. Навгиационное меню на | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: