Главная RSS Онлайн игры WarCraft Приколы Карта сайта О блоге Поиск Добавить пост Ваши посты
500 рублей помощь регистрации домена и на хосте и перенос сайта туда связь


+ Подписаться

В этой книге представлены основы по HTML 5. В ней рассказывается, как создавать свою графику и анимацию, а так же работа с мышкой и клавиатурой.

Скачать


Рисование объектов на canvas

0

Добавил: AlexMaster

Дата: 15.09.2016


Рисование объектов на canvas - на канвасе можно рисовать линии и квадраты.

Ранее я писал о новых тегах html 5, где упоминал о теге canvas. Там я в коде использовал функцию beginPath(). Помимо этой функции при рисовании линий используются moveTo(), lineTo() и stroke().
moveTo(x,y) – задаем текущее положение на холсте по x и y.
lineTo() – рисует линию от текущего положение на холсте к заданному.
stroke() – делает нарисованный контур видимым.
Пример линии.
Листинг 1.

<html>
<head>
<meta charset="utf-8">
<title>Пример линии</title>
<script>
window.onload = function()
{
var canvas = document.getElementById("drawingCanvas");
var context = canvas.getContext("2d");
canvas.style.background = "#CCCCCC";
context.beginPath();
context.moveTo(100, 150);
context.lineTo(350, 100);
context.stroke();
}
</script>
</head>
<body>
<canvas id="drawingCanvas" width="500" height="300"></canvas>
</body>
</html>

Оформление концов линий происходит с помощью lineCap. Доступны три значения: butt (используется по умолчанию), round – закругляет концы линии, square – делает концы линии квадратными.
При использовании значений round или square длина линии увеличивается на значение lineWidth. C двух сторон линий добавляются отрезки длиной lineWidth / 2, т.е. если высота линии 20 px, то с каждой конца линии добавится по 10 px и сама линия увеличится на 20 px. Например, линия была 200. станет 220.
В следующем примере на холсте создаются три линии. Обычная линия, и две линии, где значение lineCap равно roundи square.
Листинг 2.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Пример линий с оформлением концов </title>
<script>
window.onload = function()
{
var canvas = document.getElementById("drawingCanvas");
var context = canvas.getContext("2d");
canvas.style.background = "#CCCCCC";
context.beginPath();
context.moveTo(50, 50);
context.lineTo(200, 50);
context.lineWidth = 20; // толщина линии
context.strokeStyle = "#ff0000"; // цвет линии
context.lineCap = "butt";
context.stroke();

context.beginPath();
context.moveTo(50, 100);
context.lineTo(200, 100);
context.lineWidth = 20;
context.strokeStyle = "#00ff00";
context.lineCap = "round";
context.stroke();

context.beginPath();
context.moveTo(50, 150);
context.lineTo(200, 150);
context.lineWidth = 20;
context.strokeStyle = "#0000ff";
context.lineCap = "square";
context.stroke();
}
</script>
</head>
<body>
<canvas id="drawingCanvas" width="500" height="300"></canvas>
</body>
</html>

Создание многогранника с помощью точек.


В листинге 3 показано, как с помощью точек создать многогранник.
Точки по которым будут рисоваться линии расположены в переменной - массив points. Всего в массиве 16 элементов. Это значит, на холсте будут расположены 8 точек. Каждые два элемента в массиве это одна точка по x и y. Переменные w и h означают, где будет расположен многогранник (ширина и высота canvas умножается на 0.5).
Дальше следует цикл, где перебираются все элементы массива points. Так как каждые два элемента массива это координаты одной точки, то в цикле переменная i прибавляется на 2. В цикле идет проверка, если i === 0, то устанавливается точка рисования

context.moveTo(points[i]*25+w,points[i+1]*25+h)

Берется первый элемент в массиве и умножается на 25 потом прибавляется w (ширина холста * 0.5) ,так будет получена координата по x. Во втором значение следующий элемент в массиве умножается на 25 и прибавляется h (высота холста * 0.5), так будет получена координата по y. То же самое происходит, если условия цикла не сработало.

context.lineTo(points[i]*25+w, points[i+1]*25+h).

В итоге перебрав все элементы массива, будут получены координаты точек, по которым построится многогранник. Пример вы можете увидеть ниже. Создайте html документ и просто скопируйте туда код. Потом откройте html документ в браузере и вы увидите результат.
Пример листинг 3.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Создание линий и с помощью точек.</title>
<script>
window.onload = function()
{
var canvas = document.getElementById("drawingCanvas");
var context = canvas.getContext("2d");
var w = Math.round(canvas.width*0.5),
h = Math.round(canvas.height*0.5);
var points = [-4, 0,-1, -3,2, -3,5, 0,5, 3,2, 6,-1, 6,-4, 3,-4, 0];
canvas.style.background = "#CCCCCC";

context.lineWidth = 2;
context.beginPath();
for(var i = 0, len = points.length; i < len; i += 2)
{
if(i === 0){
context.moveTo(points[i]*25+w, points[i+1]*25+h)
}else {
context.lineTo(points[i]*25+w, points[i+1]*25+h)
}
}
context.strokeStyle = "#f00";
context.fillStyle = "#9ea7b8";
context.fill();
context.stroke();
}
</script>
</head>
<body>
<canvas id="drawingCanvas" width="500" height="400"></canvas>
</body>
</html>

Canvas. Создание прямоугольника.


Создадим прямоугольник на канве(canvas). Пример вы можете видеть в листинги 4. Для рисования прямоугольника используется функция fillRect. Эта функция принимает четыре параметра. Координаты рисования прямоугольника по (x,y) и ширина, и высота (width,height). Для очистки области используйте функцию clearRect. Она очищает область в форме квадрата и так же как функция fillRect принимает четыре значения. Координаты очистки по (x,y) и ширина, и высота (width,height).
translate – перемещает объект, на новое место в зависимости от начального расположения объекта. Принимает значение координаты x и y. Например, объект находился в точке x = 200, y = 50, то после применения translate со значением x = 100, y =100. Объект будет находиться в точке x = 300, y = 150.
strokeRect – рисует контур квадратной формы. Принимает значение: координаты (x,y) и ширина, и высота (width,height).
lineWidth – переменная задает толщину линии контура.
globalAlpha – устанавливает прозрачность объекта, где единица берется за основу как 100 %. Если, например, установить прозрачность 20 %, нужно написать 0.2.
Пример листинг 4.

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Пример прямоугольника</title>
<script>
window.onload = function()
{
var data, top;
var canvas = document.getElementById("drawingCanvas"),
context = canvas.getContext("2d");
canvas.style.background = "#A0A0A0"
context.translate(100,100); // Преобразование системы координат
// для всех платформ
context.lineWidth = 4;
context.strokeStyle = "#000";
context.fillStyle = 'rgb(150,190,255)';
context.globalAlpha = 1.0;
context.strokeRect(200, 50, 230, 150);
context.fillRect(200, 50, 230, 150);
}
</script>
</head>
<body>
<canvas id="drawingCanvas" width="700" height="400"></canvas>
</body>
</html>

В листинг 5 с помощью цикла рисуются 16 квадратов, четыре в ряд и четыре в столбец. Подобный пример использовался при создании игры пятнашек.
Пример листинг 5.

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Пример прямоугольника</title>

<script>

window.onload = function()
{
var canvas = document.getElementById("drawingCanvas"),
context = canvas.getContext("2d");
canvas.style.background = "#A0A0A0"
context.translate(100,100);
context.strokeStyle = "#000";
context.fillStyle = 'rgb(150,190,255)';
context.globalAlpha = 0.7;
for (var i = 0; i < 4; i++)
{
for (var j = 0; j < 4; j++)
{
context.lineWidth = 4;
context.strokeRect(i*70, j*70, 70, 70);
context.fillRect(i*70, j*70, 70, 70);
}

}
}
</script>
</head>
<body>
<canvas id="drawingCanvas" width="500" height="500"></canvas>
</body>
</html>

Исходники скачать.

Назад

Просмотров: 243

Комментарий к этой заметки:

Добавить ваш камментарий:

Введите капчу

 

Яндекс.Метрика