Лабораторные работы МИРЭА JavaScript (1017114), страница 13
Текст из файла (страница 13)
var radius = 0.4 * width;
var cx = width / 2;
var cy = height / 2;
// Делаем путь для круга от 0 до 2PI
ctx.beginPath();
ctx.arc(cx, cy, radius, 0, Math.PI * 2);
ctx.closePath();
// Устанавливаем отрисовку с тенью
ctx.shadowBlur = 10;
ctx.shadowColor = "black";
// Устанавливаем ширину и цвет линии и отрисовываем
ctx.lineWidth = 25;
ctx.strokeStyle = "#f00";
ctx.stroke();
// Убираем тень
ctx.shadowColor = "transparent";
// Создаем радиальный градиент для заливки
var gradient = ctx.createRadialGradient(cx, cx, 0, cx, cy, radius);
gradient.addColorStop(0, "#ddd");
gradient.addColorStop(1, "#eee");
// Устанавливаем градиент и делаем заливку
ctx.fillStyle = gradient;
ctx.fill();
// Устанавливаем стили текста и центрирование
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.font = "bold 55px 'Segoe UI', 'Tahoma', sans-serif";
ctx.fillStyle = "#333";
// Выводим надпись
ctx.fillText("STOP", cx, cy);
</script>
</body>
</html>
Папоротник
Переходим к классике основ изучения компьютерной графики! Давайте посмотрим, как нарисовать фрактальный лист папоротника с помощью Canvas.
Для описания папоротника нам понадобится матрица афинных преобразований, каждое из которых будет применяться с некоторой вероятностью
<html>
<body>
<canvas id="myCanvas" width="200" height="200" />
<script type='text/javascript'>
var ctx = document.getElementById("myCanvas").getContext("2d");
// Афинные преобразования для каждой из вероятностей
var barnsleyMatrix = [[ 0, 0, 0, 0.16, 0, 0],
[ 0.85, 0.04,-0.04, 0.85, 0, 1.60],
[ 0.20,-0.26, 0.23, 0.22, 0, 1.60],
[-0.15, 0.28, 0.26, 0.24, 0, 0.44]];
// Суммы вероятностей (0.01, 0.85, 0.07, 0.07)
var probability = [0.01, 0.86, 0.93, 1.0];
// Контекст для работы
var ctx = document.getElementById("myCanvas").getContext("2d");
// Ширина и высота холста
var width = ctx.canvas.width;
var height = ctx.canvas.height;
// Пиксели для изображения
var pixels = ctx.createImageData(width, height);
var iterations = 50000;
var p, n;
var x = 0.0;
var y = 0.0;
var xn, yn, xp, yp, j;
// Итерационный процесс
for (var i = 0; i <iterations; i++) {
p = Math.random();
n = 0; while (p > probability[n]) n++;
// Новые координаты
xn = barnsleyMatrix[n][0] * x + barnsleyMatrix[n][1] * y + barnsleyMatrix[n][4];
yn = barnsleyMatrix[n][2] * x + barnsleyMatrix[n][3] * y + barnsleyMatrix[n][5];
x = xn;
y = yn;
// Переводим в экранные координаты
xp = width/2 + Math.floor( x * 20);
yp = height - Math.floor(y * 20);
// Находим место в одномерном массиве пикселей
j = (yp * width + xp) * 4;
// Устанавливаем значения для компонент RGBA
pixels.data[j + 0] = 0;
pixels.data[j + 1] = 180;
pixels.data[j + 2] = 0;
pixels.data[j + 3] = 255;
}
// Записываем итоговый массив пикселей
ctx.putImageData(pixels, 0, 0);
</script>
</body>
</html>
В этом примере надо обратить внимание на два момента:
-
Доступ к пикселя осуществляется не в прямом виде, а через выгружаемый и записываемый массив пикселей (окно), причем операции чтения и записи разнесены в разные функции и во времени. Опять-таки, API побуждает разработчиков сначала произвести необходимые изменения в пикселях и уже после этого массово внести изменения вместо того, чтобы отдельно читать и записывать каждый из пикселей.
-
Массив, с которым идет работа, одномерный (хотя у объекта типа ImageData и определены ширина и высота), причем в нем последовательно хранятся не просто пиксели, а значения по каждому из каналов для каждого из пикселей. Другими словами, на каждый пиксель приходится четыре элемента массива (RGBA) со значениями от 0 до 255.
Кстати, как я уже писал в начале, Canvas может легко сочетаться с обычными изображениями и даже видео, в частности, это означает, что на Canvas можно проектировать картинку или текущий кадр видео-потока. В сочетании с доступом к отдельным пикселям, это позволяет делать анализ изображений непосредственно на клиенте с помощью JavaScript.
Гипно-спираль
Наконец, давайте посмотрим на еще несколько важных аспектов работы с Canvas — трансформации контекста отрисовки. И для этого мы нарисуем гипнотическую спираль.
<html>
<body>
<canvas id="myCanvas" width="200" height="200" />
<script type='text/javascript'>
// Отрисовка спирали
function drawSpiral(context)
{
var cx = 0;
var cy = 0;
// Количество звеньев
var iterations = 500;
context.moveTo(cx,cy); //Начало рисования
var x2 = cx, y2 = cy;
for (var i = 0; i <= iterations; i++)
{
var angle = i / 10; // угол в радианах
var radius = angle * 2; //радиус в пикселях
var x = cx + radius * Math.cos(angle);
var y = cy + radius * Math.sin(angle);
context.beginPath();
var val = Math.floor(radius * 3);
// Затухание спирали
if (val > 255) val = 255;
context.strokeStyle='rgb(' + val + ',' + val + ',' + (255) + ')';
// Отрисовка звена
context.moveTo(x2, y2);
context.lineTo(x, y);
context.stroke();
x2 = x;
y2 = y;
}
}
//Можно просто поворачивать картинку (например, с помощью трансформаций CSS).
//Можно перерисовывать спираль, добавляя сдвиг угла поворота.
//Можно перерисовывать спираль как есть. Но виртуально поворачивать систему координат.
//Последнее мы и будем делать
// Контекст для работы
var ctx = document.getElementById("myCanvas").getContext("2d");
// Ширина и высота холста
var width = ctx.canvas.width;
var height = ctx.canvas.height;
// Стиль линии
ctx.lineCap = 'round';
ctx.lineWidth = 8;
// Переносим начало координат в центр
ctx.translate(width / 2, height / 2);
// Ставим таймер
setInterval(function () {
// Очищаем экран
ctx.clearRect(-width / 2, -height / 2, width, height);
// Поворачиваем систему координат
ctx.rotate(-Math.PI / 180 );
// Рисуем спираль
drawSpiral(ctx);
}, 17);
</script>
</body>
</html>
В этом примере надо обратить внимание на следующие моменты:
-
Вместо того, чтобы поворачивать непосредственно спираль, мы виртуально поворачивали контекст отрисовки. Такой прием позволяет описать отрисовку спирали в удобных локальных координатах (заметили, что мы ее рисовали относительно центра cx = cy = 0?), а трансформацию вынесли на внешний уровень. Также с помощью метода translate мы сместили начало координат в центр экрана.
-
Canvas — примитивен. Canvas растровый и помнит только свое последнее состояние в виде массива пикселей. Мы не можем получить доступ к нарисованным линиям как отдельным объектам, которые можно было бы повернуть. Мы видим только последний слепок и чтобы нарисовать что-то новое (обновление экрана), надо делать перерисовку (через очистку экрана или поверх).
Вставка изображений
В canvas могут быть вставлены изображения форматов PNG, GIF и JPEG.
Для того, чтобы вставить изображение необходимо:
-
Создать ссылку на картинку находящуюся на странице;
-
Нарисовать ее на холсте с помощью метода drawImage('ссылка на картинку',x,y).
Создать ссылку на картинку из скриптов можно с помощью метода document.getElementById (также можно использовать методы getElementsByTagName и images).
Использование изображений
Одним из наиболее привлекательных свойств canvas является возможность использовать готового изображения. Оно может быть применено для реализации динамических фотокомпозиций, для создания фонов графиков и т.п. Также, это свойство является способом размещения текста на canvas. Внешние изображения могут быть любого формата PNG, GIF или JPEG. Другие элементы canvas на этой же странице также могут быть использованы как источники изображений.
Импортирование картинок
Обычно импортирование картинок происходит в два этапа:
-
Сначала нам нужна ссылка на объект JavaScript Image или на другой элемент canvas, как источник. Невозможно использовать картинки просто передавая URL - путь до них.
-
Потом мы рисуем картинку на canvas, используя функцию drawImage.
Давайте сначала рассмотрим первый шаг. Доступны четыре варианта:
1. Использование изображений с текущей страницы
Мы можем получить доступ к любому изображению на странице, используя коллекцию document.images, метод document.getElementsByTagName , либо, если нам известен атрибут ID изображения, метод document.getElementById.
2. Использование другого элемента canvas
Как и к нормальным изображениям, мы можем получить доступ к элементам canvas через метод document.getElementsByTagName или метод document.getElementById. Перед тем, как вы будете использовать canvas как источник, убедитесь, что вы что-либо уже нарисовали на нём.
Один из наиболее практичных вариантов использования этого метода - создание маленьких превью-картинок для больших изображений canvas.
3. Создание изображения с нуля
Ещё один вариант - создавать в нашем скрипте новые объекты Image. Главный недостаток такого подхода в том, что если мы не хотим, чтобы наш скрипт "зависал" посередине в ожидании загрузки изображения, нам нужно средство предварительной загрузки изображений.
Чтобы создать новый объект-картинку, делаем следующее:
var img = new Image(); // Создаём новый объект Image
img.src = 'myImage.png'; // Устанавливаем путь к источнику
Когда этот скрипт выполняется, изображение начинает загружаться. Если к моменту исполнения инструкции drawImage загрузка ещё не закончилась, скрипт "подвисает" до её окончания. Если нужно скрыть процесс загрузки, то следует использовать обработчик события onload:
var img = new Image(); // Создать новый объект Image
img.src = 'myImage.png'; // Установить путь к источнику
img.onload = function(){
// выполнить drawImage здесь
}
Если вы используете всего одно внешнее изображение, то такой подход хорош, но при работе более чем с одной картинкой лучше придумать что-нибудь похитрее. Рассмотрение различных тактик предварительной загрузки изображений выходит за рамки этих методических уканий, но здесь вы можете получить уже законченное решение.
4. Вложение изображения с помощью data: url
Еще один возможный способ вставки изображений - это использование data: url. Data urls позволяют вам полностью определить изображение непосредственно в коде как Base64-кодированную строку. Преимущество данного метода в том, что изображение будет доступно немедленно без каких либо дополнительных запросов к серверу. (Еще одно преимущество заключается в возможности инкапсулировать все Ваши CSS, JavaScript, HTML и изображения в одном файле, что значительно упрощает перемещение всего документа.) Однако изображения, определенные таким способом, не кэшируются, и строковое представление больших изображений может быть довольно длинным.
Рисование изображений
После того как мы указали ссылку на источник мы можем использовать метод drawImage чтобы присвоить изображению положение на холсте. Как мы увидим дальше метод drawImage имеет три вохможных вариацнии. Основная форма метода выглядит таким образом.
![](https://s.studizba.com/z.php?f=/templates/si/i/noavatar.png&w=100&h=100&t=1"){kind=avatar}
