1


"Помощь в развитии Сайта "


"Торрент- трекер от Наших сайтов"


"Архив сайта"


"Народная Солянка за 17 декабря 2010 - утечка билда!!!!!"


Выбрать дизайн:
Страница 1 из 11
Модератор форума: XemorDio 
Форум » Для вебмастеров » Графика для сайта » Скрипты сталкер для Ucoz » Как создать анимированный 3D объект на холсте в HTML5
Как создать анимированный 3D объект на холсте в HTML5
CURIOUS Дата: Вт, 26.06.2012, 13:37:28 | Сообщение # 1

Смотритель
Страна: Российская Федерация
Твой город: Волгоград
Сталкер
В Зоне Реактора с 11.03.2011
Сообщений: 2
Заслуги в Зоне Реактора
Сегодня будет очень интересный урок, на котором мы узнаем, как создаются 3D-объекты с помощью HTML5.
Мы сделаем четырехугольную звезду, которая будет вращаться вокруг своей оси. Будет реализовано несколько вариантов вращения, поэтому будьте внимательны.
ДЕМО ИСХОДНИКИ
Шаг 1. HTML
Как обычно мы начинаем с HTML кода.
index.html
Code


  <!DOCTYPE html>
  <html lang="ru" >
      <head>
          <meta charset="utf-8" />
          <title>Как создать анимированный 3D объект на холсте в HTML5 | FirstDev.org</title>
          <link rel="stylesheet" type="text/css" href="css/main.css" />
          <script type="text/javascript" src="js/main.js"></script>
      </head>
      <body>
          <div class="example">
              <canvas id="star_object" style="border:1px solid black;"><p class="noCanvas">Извините,  но ваш браузер не поддерживает Canvas в HTML5</canvas>
          </div>
          <footer>
              <h2>Как создать анимированный 3D объект на холсте в HTML5</h2>
              <a href="http://firstdev.org/?p=1707" class="stuts">Вернуться на <span>FirstDev.org</span></a>
          </footer>
      </body>

Ничего особенного нет, кроме тега canvas.
Шаг 2. CSS
css/main.css
Стили применяются только для позиционирования элементов на странице, поэтому я их не буду тут указывать. Файл со стилями можно найти в исходниках.
Step 3. JS
css/main.css
Стили применяются только для позиционирования элементов на странице, поэтому я их не буду тут указывать. Файл со стилями можно найти в исходниках.
Step 3. JS
Вот наш JS код:
js/main.js
Code
var iStarSize = 150;
  var iCanvasWidth = 500;
  var iCanvasHeight = 500;
  var context, canvas;
  var x, y;
  var degrees = 0.0;
  var dx, dy;
  function run() {
      degrees += 0.1;
      if (x + dx > iStarSize/2 || x + dx < -iStarSize/2)
          dx = -dx;
      x += dx;
      /*if (y + dy > iStarSize/2 || y + dy < -iStarSize/2) // на будущее
          dy = -dy;
      y += dy;*/
      render();
  }
  function render() {
      context.clearRect(0, 0, iCanvasWidth, iCanvasWidth);
      context.save();
      // установить начальную позицию
      context.translate( iStarSize * 1.5, iStarSize * 1.5 );
      // установить свойства стиля
      context.fillStyle = '#bbb';
      context.strokeStyle = '#000';
      context.lineWidth = 2;
      // начало произвольного объекта - звезда
      context.beginPath();
      // раскоментируйте строку, если хотите сделать поворот на плоскости
      //context.rotate(degrees);
      // изменение необходимых точек для моделирования 3D вращения
      context.moveTo( 0, -iStarSize );
      context.lineTo( iStarSize / 10 - x / 5, - iStarSize / 5 );
      context.lineTo( iStarSize / 2 - x, 0 );
      context.lineTo( iStarSize / 10 - x / 5, iStarSize / 5 );
      context.lineTo( 0, iStarSize );
      context.lineTo( -iStarSize / 10 + x / 5, iStarSize / 5 );
      context.lineTo( -iStarSize / 2 + x, 0 );
      context.lineTo( -iStarSize / 10 + x / 5, - iStarSize / 5 );
      context.lineTo( 0, -iStarSize );
      // добавить тень к объекту
      context.shadowOffsetX = 10;
      context.shadowOffsetY = 10;
      context.shadowBlur    = 4;
      context.shadowColor   = 'rgba(180, 180, 180, 0.8)';
      // заполнить фигуру, нарисовать рамку
      context.fill();
      context.stroke();
      context.closePath();
      context.restore();
      // вывести некоторую отладочную информацию
      context.font = '12px Verdana';
      context.fillStyle = '#000';
      context.fillText('x: ' + x + '; y: ' + y, 10, 15);
      context.fillText('dx: ' + dx + '; dy: ' + dy, 10, 30);
  }
  window.onload = function(){
      canvas = document.getElementById('star_object');
      // установить размер нашего холста
      canvas.width = iCanvasWidth;
      canvas.height = iCanvasWidth;
      context = canvas.getContext('2d');
      // определения внутренних переменных
      x = y = 1;
      dx = dy = 4;
      setInterval(run, 20);
  };

Обратите внимание на то, что делается в функции render, так как именно там происходит отрисовка фигуры.


Сталкер Ушёл из жизни, он навсегда остался в зоне
Дополнительная информация

Немного о CURIOUS..
Зарегистрирован: 11.03.2011
Группа: Сталкеры
Страна: Российская Федерация
город: Волгоград
 
Форум » Для вебмастеров » Графика для сайта » Скрипты сталкер для Ucoz » Как создать анимированный 3D объект на холсте в HTML5
Страница 1 из 11
Поиск:

Сегодня в Баре - Реактор

Кто был:
Легенда условных обозначений : Призрак, Администратор, Модератор, Проводник, Сталкеры, Чистое небо, Тёмные, Свобода, Наёмники, Нейтралы, Военные, Долг, Монолит, Заблокированные .

Последние сообщения:

Чат

Активисты Форума:

Нужные темы:


Radio Унесённых Сталкером
Хочешь узнать человека — дай ему власть Сталкер Старик
LENA_D               (09.10.2010)
CMIT               (03.04.2016)
kapa               (09.01.2014)
Dimon02022               (08.11.2011)
Strelok               (01.11.2014)
ULTRA               (04.09.2015)
tyman21               (09.11.2013)
Этот               (01.08.2015)
vitto               (31.03.2011)

Пришедшие в Бар:


XaMeJIe0H               (07.12.2016)
СНЕГУРОЧКА               (06.12.2016)
Bambarbeya               (06.12.2016)
BravoPahomov               (06.12.2016)
DedMoroz               (06.12.2016)
mag224               (05.12.2016)
Push 2 Check Рейтинг@Mail.ru Этот сайт защищен «Site Guard» Яндекс.Метрика