 | |  |
|
| Обновленные темы |
Популярные темы |
Последние файлы |
Последние новости |
|
|
|
|
|
Как создать анимированный 3D объект на холсте в HTML5
|
|
|
|
Дата: Вт, 26.06.2012, 13:37:28 | Сообщение # 1
|
|
 Сегодня будет очень интересный урок, на котором мы узнаем, как создаются 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, так как именно там происходит отрисовка фигуры.
Сталкер Некрасов..
В Зоне: 11.03.2011
Ранг: Ветеран сайта
Страна: Российская Федерация
город: Волгоград
|
|
| |  | |  |
|
