3D текст, расположенный по кругу с помощью HTML5
Используем HTML5 для создания текста с эффектами 3D (с помощью теней) и расположения его по кругу. Также будет выполняться анимация движения букв.
Разметка 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); // Выводим сцену }
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/c5YIf6ulWuo/lessons.php


Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2025-07-09 » Индексация сайта: что это и как ускорить попадание страниц в поисковики
- 2025-07-09 » 4 маркетинговых трюка от Стива Джобса
- 2025-07-08 » Как мышление влияет на успех бизнеса, и причем тут эмоциональный интеллект
- 2025-07-08 » «Бомж-маркетинг» без бюджета: механика, тактики и результаты
- 2025-07-08 » Медицинский интернет-маркетинг: каналы, особенности и рекомендации
- 2025-07-04 » Утечка данных стоит дороже, чем их защита: почему вам нужна грамотная ИТ-инфраструктура
- 2025-07-04 » Персональные данные: правила хранения и обработки и изменения 2025 года
- 2025-07-04 » Владельцам сайтов: изменения в законе о персональных данных
- 2025-07-04 » Персональные данные: самый полный гайд на 2025 год
- 2025-07-04 » Штрафы за нарушения в работе с персональными данными с 30 мая 2025 года: утечка в интернет и неуведомление РКН
- 2025-07-04 » Новые штрафы в работе с персональными данными: что проверить прямо сейчас
- 2025-07-04 » Google выкатил 68-страничный гайд по промптам. Я прочитал его за вас и вытащил 4 главных правила
- 2025-07-04 » Как выстроить доверие и лояльность клиентов через точки контакта
- 2025-07-04 » Пять SEO-правил, которые реально работают в 2025 году
- 2025-06-10 » Кому нужно срочно подать уведомление в РКН об обработке персональных данных и как это правильно сделать
- 2025-06-10 » Что такое VPN и зачем он нужен?
- 2025-06-10 » Нейросети для создания видео: 7 инструментов и что они могут
- 2025-06-10 » ChatGPT, DeepSeek, Grok, Gemini доступны на русском бесплатно. Внедряем?
- 2025-06-10 » 12 нейросетей для работы с маркетплейсами: создание карточек и описаний для Wildberries и Ozon
- 2025-06-10 » 11 нейросетей для генерации изображений в 2025 году
- 2025-05-30 » Год назад то, что занимало у меня несколько дней работы, сейчас я делаю за 1-2 часа. Без преувеличений. И это только начало
- 2025-05-25 » Нейросети для написания текста: 7 сервисов в помощь копирайтеру
- 2025-05-25 » Сайты с качественным контентом смогут получать больше трафика после обновления алгоритмов в Поиске Яндекса
- 2025-05-07 » Почему страницы не индексируются Google: три типа проблем
- 2025-05-05 » Лидеры рейтинга самых дорогих компаний Рунета — 2025
- 2025-05-05 » Мы делали презентации 35 лет, а потом пришла нейросеть
- 2025-04-08 » Горшочек, рисуй: 10 бесплатных сервисов для генерации картинок
- 2025-04-08 » SEO-продвижение в 2025 году: 15 трендов, без которых ТОП не светит
- 2025-03-14 » SPF-запись
- 2025-03-07 » SEO на маркетплейсах: как оптимизировать карточку товара для поисковой выдачи
Кто мало хочет, тот дешево стоит |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.