3D текст, расположенный по кругу с помощью HTML5

Используем HTML5 для создания текста с эффектами 3D (с помощью теней) и расположения его по кругу. Также будет выполняться анимация движения букв.

demosourse

 

 

Разметка HTML

Для демонстрации создаем простую страницу с элементом canvas

 <!DOCTYPE html>
<html lang="ru" >
    <head>
        <meta charset="utf-8" />
        <title>Текст по кругу с эффектом 3D на HTML5 | Материалы сайта RUSELLER.COM</title>
        <link href="css/main.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="js/script.js"></script>
    </head>
    <body>
        <header>
            <h2>Текст по кругу с эффектом 3D на HTML5</h2>
            <a href="http://www.ruseller.com" class="stuts" target="_blank">Материалы сайта <span>RUSELLER.COM</span></a>
        </header>
        <div class="container">
            <div class="contr">
                <input type="radio" name="mode" onchange="bPlay = false" checked /><label>Стоп</label>
                <input type="radio" name="mode" onchange="bPlay = true" /><label>Пуск</label>
            </div>
            <canvas id="panel" width="600" height="600"></canvas>
        </div>
    </body>
</html>

 

JavaScript

Весь функционал нашего примера реализован в коде JavaScript. Основная функция разделяет строку текста на отдельные символы и выводит их с необходимыми трансформациями:

// Переменные
var canvas, ctx;
var bPlay = false;
var iAngle = 0;
var sText = 'Привет! 3D текст по кругу. ';

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

function drawScene() { // Основная функция вывода сцены
    if (bPlay == 1) {
        clear(); // Очистка элемента canvas

        // Заполняем фон
        ctx.fillStyle = '#d7e8f1';
        ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);

        // Меняем угол
        iAngle+=0.005;

        // и выводим текст по кругу с радиусом 200 в центре элемента canvas
        draw3DTextCircle(sText, canvas.width / 2, canvas.height / 2, 200, Math.PI / 2 - iAngle);
    }
}

function draw3DTextCircle(s, x, y, radius, iSAngle){

    // Радиан на символ
    var fRadPerLetter = 2*Math.PI / s.length;

    // Сохраняем контекст, переводим и вращаем его
    ctx.save();
    ctx.translate(x,y);
    ctx.rotate(iSAngle);

    // Количество дополнительных нижних слоев
    var iDepth = 4;

    // Устанавливаем темно-зеленый цвет для дополнительных слоев
    ctx.fillStyle = '#168d1e';

    // Обрабоатываем каждый символ строки
    for (var i=0; i<s.length; i++) {
        ctx.save();
        ctx.rotate(i*fRadPerLetter);

        // Выводим дополнительные слои
        for (var n = 0; n < iDepth; n++) {
            ctx.fillText(s[i], n, n - radius);
        }

        // Параметры тени
        ctx.fillStyle = '#00d50f';
        ctx.shadowColor = 'black';
        ctx.shadowBlur = 10;
        ctx.shadowOffsetX = iDepth + 2;
        ctx.shadowOffsetY = iDepth + 2;

        // выводим символы
        ctx.fillText(s[i], 0, -radius);
        ctx.restore();
   }
   ctx.restore();
}

// Привязываем событие 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');

    // Инициализуем строку текста
    ctx.font = '64px Verdana';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Заполняем фон
    ctx.fillStyle = '#d7e8f1';
    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);

    // Выводим текст по кругу с радуисом 200 по центру элемента canvas
    draw3DTextCircle(sText, canvas.width / 2, canvas.height / 2, 200, Math.PI / 2 - iAngle);

    setInterval(drawScene, 40); // Выводим сцену
}

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.script-tutorials.com/html5-3d-circle-text-with-shadows/
Перевел: Сергей Фастунов
Урок создан: 16 Июня 2012
Просмотров: 34049
Правила перепечатки

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

^ Наверх ^