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>

В этом примере надо обратить внимание на следующие моменты:

1. Вместо того, чтобы поворачивать непосредственно спираль, мы виртуально поворачивали контекст отрисовки. Такой прием позволяет описать отрисовку спирали в удобных локальных координатах (заметили, что мы ее рисовали относительно центра cx = cy = 0? ), а трансформацию вынесли на внешний уровень. Также с помощью метода translate мы сместили начало координат в центр экрана.
2. Canvas — примитивен. Canvas растровый и помнит только свое последнее состояние в виде массива пикселей. Мы не можем получить доступ к нарисованным линиям как отдельным объектам, которые можно было бы повернуть. Мы видим только последний слепок и чтобы нарисовать что-то новое (обновление экрана), надо делать перерисовку (через очистку экрана или поверх).

Вставка изображений

В canvas могут быть вставлены изображения форматов PNG, GIF и JPEG.

Для того, чтобы вставить изображение необходимо:

1. Создать ссылку на картинку находящуюся на странице;
2. Нарисовать ее на холсте с помощью метода drawImage('ссылка на картинку', x, y).

Создать ссылку на картинку из скриптов можно с помощью метода document.getElementById (также можно использовать методы getElementsByTagName и images ).

Использование изображений

Одним из наиболее привлекательных свойств canvas является возможность использовать готового изображения. Оно может быть применено для реализации динамических фотокомпозиций, для создания фонов графиков и т.п. Также, это свойство является способом размещения текста на canvas. Внешние изображения могут быть любого формата PNG, GIF или JPEG. Другие элементы canvas на этой же странице также могут быть использованы как источники изображений.

 

Импортирование картинок

Обычно импортирование картинок происходит в два этапа:

· Сначала нам нужна ссылка на объект JavaScript Image или на другой элемент canvas, как источник. Невозможно использовать картинки просто передавая URL/путь до них.

· Потом мы рисуем картинку на canvas, используя функцию drawImage.

Давайте сначала рассмотрим первый шаг. Доступны четыре варианта:

Использование изображений с текущей страницы

Мы можем получить доступ к любому изображению на странице, используя коллекцию document.images, метод document.getElementsByTagName , либо, если нам известен атрибут ID изображения, метод document.getElementById.

Использование другого элемента canvas

Как и к нормальным изображениям, мы можем получить доступ к элементам canvas через метод document.getElementsByTagName или метод document.getElementById. Перед тем, как вы будете использовать canvas как источник, убедитесь, что вы что-либо уже нарисовали на нём.

Один из наиболее практичных вариантов использования этого метода - создание маленьких превью-картинок для больших изображений canvas.

Создание изображения с нуля

Ещё один вариант - создавать в нашем скрипте новые объекты Image. Главный недостаток такого подхода в том, что если мы не хотим, чтобы наш скрипт " зависал" посередине в ожидании загрузки изображения, нам нужно средство предварительной загрузки изображений.

Чтобы создать новый объект-картинку, мы делаем следующее:

var img = new Image(); // Создаём новый объект Imageimg.src = 'myImage.png'; // Устанавливаем путь к источнику

Когда этот скрипт выполняется, изображение начинает загружаться. Если к моменту исполнения инструкции drawImage загрузка ещё не закончилась, скрипт " подвисает" до её окончания. Если вы не хотите, чтобы такое случилось, используйте обработчик события onload:

var img = new Image(); // Создать новый объект Imageimg.src = 'myImage.png'; // Установить путь к источникуimg.onload = function(){ // выполнить drawImage здесь}

 

Если вы используете всего одно внешнее изображение, то такой подход хорош, но при работе более чем с одной картинкой лучше придумать что-нибудь похитрее. Рассмотрение различных тактик предварительной загрузки изображений выходит за рамки этих методических уканий, но здесь вы можете получить уже законченное решение.

Вложение изображения с помощью data: url

Еще один возможный способ вставки изображений - это использование data: url. Data urls позволяют вам полностью определить изображение непосредственно в коде как Base64-кодированную строку. Преимущество данного метода в том, что изображение будет доступно немедленно без каких либо дополнительных запросов к серверу. (Еще одно преимущество заключается в возможности инкапсулировать все Ваши CSS, JavaScript, HTML и изображения в одном файле, что значительно упрощает перемещение всего документа.) Однако изображения, определенные таким способом, не кэшируются, и строковое представление больших изображений может быть довольно длинным.

Рисование изображений

После того как мы указали ссылку на источник мы можем использовать метод drawImage чтобы присвоить изображению положение на холсте. Как мы увидим дальше метод drawImage имеет три вохможных вариацнии. Основная форма метода выглядит таким образом.

DrawImage(image, x, y)

Где image это идентификатор изображения а, x и y положение на холсте по оси ординат и абсцис соответственно.

Пример 1 использования изображения

В следующем примере мы будем использовать внешнее изображение как фон для небольшого графика. Использование фона позволяет сделать скрипт значительно быстрее. Здесь мы используем только одно изображение поэтому используем событие onload для запуска функции. С помощью метода drawImage мы позиционируем фон на координатах (0, 0) тоесть в верхнем левом углу холста

Смотреть этот пример

function draw() { var ctx = document.getElementById('canvas').getContext('2d'); var img = new Image(); img.onload = function(){ ctx.drawImage(img, 0, 0); ctx.beginPath(); ctx.moveTo(30, 96); ctx.lineTo(70, 66); ctx.lineTo(103, 76); ctx.lineTo(170, 15); ctx.stroke(); } img.src = 'images/backdrop.png'; }

Масштабирование

Второй вариант использования метода drawImage отличается от первого тем что в нем присутствуют параметры масштабного отображения на холсте.

⇐ Предыдущая12345Следующая ⇒

Поделиться: