- •Московский государственный университет
- •If (canvas.GetContext){
- •Рисование прямоугольников
- •Рисование составных фигур Составные фигуры состоят из нескольких соединенных простых объектов (таких как линии, круги и т.Д.)
- •Структура программы выглядит следующим образом
- •X.BeginPath();
- •X.BeginPath();
- •X.FillRect(20,20,200,200);
- •X.FillRect(50,40,55,55);
- •Папоротник
- •Гипно-спираль
- •Вставка изображений
- •4. Вложение изображения с помощью data: url
- •Рисование изображений
- •Пример 1 использования изображения
- •Масштабирование
- •Пример 2 использования изображения
- •Разрезание изображений
- •Пример 3 использования изображения
- •Пример галереи
- •Javascript графика: Объект Image.
- •Javascript графика: src и lowsrc.
- •Изменение картинки.
- •Мультипликация в 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 здесь
}
Если вы используете всего одно внешнее изображение, то такой подход хорош, но при работе более чем с одной картинкой лучше придумать что-нибудь похитрее. Рассмотрение различных тактик предварительной загрузки изображений выходит за рамки этих методических уканий, но здесь вы можете получить уже законченное решение.