{lang: ‘ru’}

уроки html5, html5 canvas, html5 примеры, html5 canvas 3dСегодня будет очень интересный урок, на котором мы узнаем, как создаются 3D-объекты с помощью HTML5. В этот раз мы сделаем четырехугольную звезду, которая будет вращаться вокруг своей оси. Будет реализовано несколько вариантов вращения, поэтому будьте внимательны.

Вот исходники и демо:

Demo  Исходники

Шаг 1. HTML

Как обычно мы начинаем с HTML кода.

index.html

<!DOCTYPE html>
<html lang="ru" >
    <head>
        <meta charset="utf-8" />
		<title>Как создать анимированный 3D объект на холсте в HTML5 | officialplat-tt.ru</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://officialplat-tt.ru/?p=1707" class="stuts">Вернуться на <span>officialplat-tt.ru</span></a>
        </footer>
	</body>
</html>

Ничего особенного нет, кроме тега  canvas.

Шаг 2. CSS

css/main.css

Стили применяются только для позиционирования элементов на странице, поэтому я их не буду тут указывать. Файл со стилями можно найти в исходниках.

Step 3. JS

Вот наш JS код:

js/main.js

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, так как именно там происходит отрисовка фигуры.

Я надеюсь, что этот урок по работе с HTML5 был интересным, если у вас есть какие-нибудь предложения или Вы просто хотите что-либо сказать — оставляйте комментарии и я буду рад это услышать. Удачи!

 


Получайте новые статьи блога прямо себе на почту

Рекомендую также:

  1. Разработка игр на HTML5 — Урок 2
  2. Разработка игр на HTML5 — Управление космическим кораблем — Урок 3
  3. HTML5 Canvas — Создание собственной программы Paint
  4. Разработка игр на HTML5 — Урок 4
  5. Разработка игр на HTML5 — Урок 5