Начинаем
Настало время что-нибудь нарисовать на нашем экране. Сначала нам понадобится HTML страница на которой собственно и будет отображаться canvas элемент.
В коде страницы все достаточно просто и понятно. Есть два важных элемента:
<script type="text/javascript" src="jsplatformer1.js"></script>
Эта строчка подключает файл с кодом JavaScript, с помощью которого будет изменяться canvas элемент, который будет описан ниже.
<canvas id="canvas" width="600" height="400"> <p>Your browser does not support the canvas element.</p> </canvas>
Так мы создаем элемент canvas. Броузеры, которые не поддерживают элемент canvas, такие как IE (до версии 8), игнорируют его, отображая вместо него дочерний элемент. В нашем случае это простой параграф, предупреждающий пользователя. что их браузер не поддерживает элемент canvas. Все броузеры, которые этот элемент поддерживают - не отображают его дочерний элемент.
Атрибут ID элемента canvas очень важен, так как понадобится нам для получения ссылки на этот элемент с помощью JavaScript. Атрибуты ширины и высоты просто указывают размеры canvas, как и для других html элементов вроде таблицы или изображения.
Содержимое файла jsplatformer1.js:
Сам по себе элемент canvas достаточно прост и бесполезен. Необходимо с помощью JavaScript что-нибудь отрисовывать на canvas и в нашем случае этот код находится в файле jsplatformer1.js. В качестве простого примера мы загружаем изображение, отрисовываем его на canvas и двигаем его.
Сначала определим несколько глобальных переменных:
const FPS = 30;
FPS определяет частоту с которой будет перерисовываться canvas.
var x = 0; var y = 0; var xDirection = 1; var yDirection = 1;
Переменные x, y, xDirection и yDirection используются для определения положения изображения (относительно левого верхнего угла canvas) и указывают направление движения изображения.
var image = new Image(); image.src = "http://javascript-tutorials.googlecode.com/files/jsplatformer1-smiley.jpg";
Чтобы отрисовать изображение на canvas нам сначала необходимо загрузить это изображение. Для этого мы создаем объект Image и устанавливаем свойство src на месторасположение этого файла.
var canvas = null;
var context2D=null;
Нам также понадобится ссылка на элемент canvas, также как и на отрисовывамый контекст. Мы присвоим необходимые значения элементу позже, а пока оставим их в null.
windows.onload = init;
В конце нам необходимо дать знать, когда страница будет загружена, чтобы запустить код который отрисует canvas, поэтому мы указываем функцию init, которая будет вызвана при отработке события окна после загрузки.
Настало время что-нибудь нарисовать на нашем экране. Сначала нам понадобится HTML страница на которой собственно и будет отображаться canvas элемент.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<title>JavaScript Platformer 1</title>
<script type="text/javascript" src="jsplatformer1.js"></script>
<style type="text/css">
body { font-family: Arial,Helvetica,sans-serif;}
</style>
</head>
<body>
<p>
<a href="http://www.brighthub.com/internet/web-development/articles/38364.aspx">
Game Development with Javascript and the canvas element
</a>
</p>
<canvas id="canvas" width="600" height="400">
<p>Your browser does not support the canvas element.</p>
</canvas>
</body>
</html>В коде страницы все достаточно просто и понятно. Есть два важных элемента:
<script type="text/javascript" src="jsplatformer1.js"></script>
Эта строчка подключает файл с кодом JavaScript, с помощью которого будет изменяться canvas элемент, который будет описан ниже.
<canvas id="canvas" width="600" height="400"> <p>Your browser does not support the canvas element.</p> </canvas>
Так мы создаем элемент canvas. Броузеры, которые не поддерживают элемент canvas, такие как IE (до версии 8), игнорируют его, отображая вместо него дочерний элемент. В нашем случае это простой параграф, предупреждающий пользователя. что их браузер не поддерживает элемент canvas. Все броузеры, которые этот элемент поддерживают - не отображают его дочерний элемент.
Атрибут ID элемента canvas очень важен, так как понадобится нам для получения ссылки на этот элемент с помощью JavaScript. Атрибуты ширины и высоты просто указывают размеры canvas, как и для других html элементов вроде таблицы или изображения.
Содержимое файла jsplatformer1.js:
// target frames per second
const FPS = 30;
var x = 0;
var y = 0;
var xDirection = 1;
var yDirection = 1;
var image = new Image();
image.src = "http://javascript-tutorials.googlecode.com/files/jsplatformer1-smiley.jpg";
var canvas = null;
var context2D = null;
window.onload = init;
function init()
{
canvas = document.getElementById('canvas');
context2D = canvas.getContext('2d');
setInterval(draw, 1000 / FPS);
}
function draw()
{
context2D.clearRect(0, 0, canvas.width, canvas.height);
context2D.drawImage(image, x, y);
x += 1 * xDirection;
y += 1 * yDirection;
if (x >= 450)
{
x = 450;
xDirection = -1;
}
else if (x <= 0)
{
x = 0;
xDirection = 1;
}
if (y >= 250)
{
y = 250;
yDirection = -1;
}
else if (y <= 0)
{
y = 0;
yDirection = 1;
}
}Сам по себе элемент canvas достаточно прост и бесполезен. Необходимо с помощью JavaScript что-нибудь отрисовывать на canvas и в нашем случае этот код находится в файле jsplatformer1.js. В качестве простого примера мы загружаем изображение, отрисовываем его на canvas и двигаем его.
Сначала определим несколько глобальных переменных:
const FPS = 30;
FPS определяет частоту с которой будет перерисовываться canvas.
var x = 0; var y = 0; var xDirection = 1; var yDirection = 1;
Переменные x, y, xDirection и yDirection используются для определения положения изображения (относительно левого верхнего угла canvas) и указывают направление движения изображения.
var image = new Image(); image.src = "http://javascript-tutorials.googlecode.com/files/jsplatformer1-smiley.jpg";
Чтобы отрисовать изображение на canvas нам сначала необходимо загрузить это изображение. Для этого мы создаем объект Image и устанавливаем свойство src на месторасположение этого файла.
var canvas = null;
var context2D=null;
Нам также понадобится ссылка на элемент canvas, также как и на отрисовывамый контекст. Мы присвоим необходимые значения элементу позже, а пока оставим их в null.
windows.onload = init;
В конце нам необходимо дать знать, когда страница будет загружена, чтобы запустить код который отрисует canvas, поэтому мы указываем функцию init, которая будет вызвана при отработке события окна после загрузки.
Комментариев нет:
Отправить комментарий