Ogniste menu HTML5 + JS

3 września, 2012 w kategoriach: Web developing, HTML, xHTML, Zaawansowane opcje

3,676 0
Dane:
  • Czas pracy: 15min
  • Poziom: Średnio zaawansowany
Opis:

Chciałbym przedstawić menu z efektem ognia + przyciski z funkcją hover. Wszystko w HTML5 + JS

Pokaż/Ukryj wszystko

Jeżeli chcecie obejrzeć efekty końcowe to zapraszam do obrzejrzenia demo. Po gotowe pliki zapraszam na stronę źródłową tutoriala.


Wydawnictwo Strefa Kursów

Jest tutaj dodatkowo zawarty jeden element canvas + jeden element image.

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>HTML5 Canvas Navigation menu with Fire | Script Tutorials</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>
        <canvas id="panel" width="1000px" height="100px">HTML5 compliant browser required</canvas>
        <img id="image" src="images/bg.jpg"  />
    </body>
</html>

Teraz utwórzmy pusty plik js/fire_menu.js i załadujmy do niego poniższy kod:

// Przyciski
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;
}

// Wyciągnij funckję przycisku
function drawButton(ctx, button) {
    // draw button image
    ctx.drawImage(button.image, 0, button.imageShift, button.w, button.h, button.x, button.y, button.w, button.h);

    // tekst
    ctx.fillText(button.text, button.x + button.w / 2, 5 + button.y + button.h / 2);
}

// Pobierz funckję polożenia myszki
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);
    }
}

// Wewnętrzne zmienne
var canvas, ctx;
var data_width;
var data_height;
var colors = [];
var out_data = [];
var buttons = [];

// Wypełnij nową tablicę daną wartością
function fill_new_array(len, val) {
    var rv = new Array(len);
    while (--len >= 0) {
        rv[len] = val;
    }
    return rv;
}

// Przygotuj paletę funcyjną
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};
    }
}

// Tworzenie sceny głównej
function drawScene() {
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); // clear canvas

    // Tworzenie ognia ognia
    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);

    // Przygotuj krój pisma
    ctx.font = '26px DS-Digital';
    ctx.fillStyle = '#000000';
    ctx.textAlign = "center";

    // Stwórz wszystkie przyciski
    for (var ib = 0; ib < buttons.length; ib++) { //
        drawButton(ctx, buttons[ib]);
    }
}

// Window Onload event handler
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;
    }
}

// Główna inicjalizacja
function main_init() {

    // Create canvas and context objects
    canvas = document.getElementById('panel');
    ctx = canvas.getContext('2d');

    // Przygotuj pliki dla ognia i przygotuj paletę
    img_data = ctx.createImageData(canvas.width, canvas.height);
    data_width = img_data.width,
    data_height = img_data.height,
    prepare_palette();

    // Wypełnij nową tablicę 0
    out_data = fill_new_array(data_width * data_height, 0)

    // Przygotuj obrazki do przycisków
    var buttonImage = new Image();
    buttonImage.src = 'images/button.png';
    buttonImage.onload = function() {};

    // Przygotuj 3 różne przyciski
    buttons.push(new Button(0, 10, 245, 62, 'normal', buttonImage, 'button #1'));
    buttons.push(new Button(250, 10, 245, 62, 'normal', buttonImage, 'button #2'));
    buttons.push(new Button(500, 10, 245, 62, 'normal', buttonImage, 'button #3'));
    buttons.push(new Button(750, 10, 245, 62, 'normal', buttonImage, 'button #4'));

    // Pętla głównej sceny
    setInterval(drawScene, 40);

    // Obsługa zdarzeń onmouseover (czyli po najechaniu mysza na przycisk)
    canvas.onmousemove = function(e) {
        var mouse = getMousePosition(e).sub(new vector2d(canvas.offsetLeft, canvas.offsetTop));

        for (var i = 0; i < buttons.length; i++) { // Apply 'hover' state for buttons
            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;
                }
            }
        }
    }

    // Obsługa zdarzeń Onmousedown (gdy nie najeżdżamy myszą na przycisk)
    canvas.onmousedown = function(e) {
        var mouse = getMousePosition(e).sub(new vector2d(canvas.offsetLeft, canvas.offsetTop));

        for (var i = 0; i < buttons.length; i++) { // Apply 'pressed' state for buttons
            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 (po kliknięciu na przycisk)
    canvas.onmouseup = function(e) {
        var mouse = getMousePosition(e).sub(new vector2d(canvas.offsetLeft, canvas.offsetTop));

        for (var i = 0; i < buttons.length; i++) { // Reset states for buttons
            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 + ' is pushed');
            }

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

Podziękowania dla strony http://www.script-tutorials.com za udostępnienie tutoriala.

Pokaż/Ukryj wszystko

Tutorial się podobał? Podziel się z innymi:

Dodaj komentarz