Введение в холст

Холст является HTML-тэгом, определяющим пользовательскую область получения в Вашем веб-контенте. Можно тогда получить доступ к холсту, поскольку JavaScript возражает и получает его использующие функции, подобные Кварцевой системе рисования OS X. Виджет Инструментальной панели Мировых часов (доступный на всех машинах Apple рабочая версия 10.4 OS X или позже) показывает хороший пример, хотя использование холста ни в коем случае не является монопольным к Инструментальной панели.

Существует два шага к использованию холста в Вашей веб-странице: определение предметной области и рисование к холсту возражают в разделе сценария Вашего HTML.

Определение холста

Для использования холста в веб-странице, Вы сначала устанавливаете область получения. Виджет Инструментальной панели Мировых часов определяет эту область со следующим кодом:

<canvas id="myCanvas" width='172' height='172'></canvas>

В этом контексте, атрибутах <canvas> стоящий замечания id, width, и height.

id атрибут является пользовательским идентификатором, используемым для предназначения для определенного объекта холста при рисовании. width и height атрибуты указывают размер области холста.

В виджете Мировых часов эта область определяется, чтобы быть холстом:

Теперь, когда область холста была определена, это готово быть заполненным.

Привлечение холста

Как только Вы определили область холоста, можно записать код для рисования содержания. Прежде чем можно будет сделать это, необходимо получить холст и его контекст получения. Контекст обрабатывает фактический рендеринг Вашего содержания. Виджет Мировых часов выполняет в этом drawHands() функция:

function drawHands (hoursAngle, minutesAngle, secondsAngle)

{

    var canvas = document.getElementById("myCanvas");

    var context = canvas.getContext("2d");

Эта функция рисует час, минуту и секундные стрелки на поверхности Мировых часов. Как параметры, это берет углы, под которыми три руки должны быть повернуты, как передано в его вызывающей стороной.

Вы сначала запрашиваете среду JavaScript для ранее определенного холста, с помощью его уникального идентификатора: id атрибут в <canvas> тег.

Как только Ваш сценарий получил холст, необходимо получить его контекст. Используя getContext("2d") метод, присвойте контекст получения холста это context переменная. С этого момента Вы вызываете все операции, предназначенные для холста на context.

Первая работа Вы выполняете порожнюю тару холст. Как drawHands() функция вызывается каждую секунду, важно освободить его каждый раз, так, чтобы ранее нарисованная конфигурация просто не рисовала поверх новой конфигурации. Весь регион, как определено стандартными координатами в <canvas> тегируйте, очищен:

    context.clearRect(0, 0, 172, 172);

Затем, Вы сохраняете состояние исходного пространства контекста так, чтобы можно было восстановить позже. В исходном контексте источник (эти 0,0 координаты) холста находится в верхнем левом углу. После завершения предстоящего кода для прорисовки Вы хотите возвратиться к этому контексту. Используйте метод сохранения контекста, чтобы сделать так:

    context.save();

Так как Вы хотите, чтобы руки часов вращались вокруг центра часов, переведите источник пространства контекста к центру холста:

    context.translate(172/2, 172/2);

Тогда нарисуйте час, передают поверхность часов. Вы копируете текущий контекст (с источником в центре циферблата), так, чтобы это могло восстановленный позже. Затем Вы поворачиваете весь контекст, так, чтобы ось y выровняла себя с углом, на который должна указать рука часа. Затем, Вы рисуете изображение руки часа (создаваемый в коде как JavaScript Image объект). Метод drawImage() имеет пять параметров: изображение, которое будет нарисовано, x и y координирует для левого нижнего угла изображения, и ширины и высоты изображения. Помните при рисовании изображения как движения прямо в графическом контексте вращение контекста, чтобы быть под корректным углом для руки часа:

    context.save();

    context.rotate(hoursAngle);

    context.drawImage(hourhand, -4, -28, 9, 25);

    context.restore();

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

Используйте подобную процедуру для рисования минутной стрелки на поверхности часов. Различия на сей раз находятся в углу, Вы поворачиваете контекст к и размер минутной стрелки. Обратите внимание на то, что Вы сохраняете и поворачиваете контекст снова, и затем Вы восстанавливаете его к его предыдущему состоянию, так, чтобы можно было нарисовать следующий элемент, независимый от вращения, необходимого для минутной стрелки:

    context.save();

    context.rotate (minutesAngle);

    context.drawImage (minhand, -8, -44, 18, 53);

    context.restore();

Наконец, нарисуйте секундную стрелку. Обратите внимание на то, что на сей раз контекст не должен быть сохранен и восстановлен. Так как это - прошлый раз, когда что-либо будет нарисовано в этом определенном контексте (с источником в центре холста), не необходимо для Вас сохранить и восстановить снова:

    context.rotate (secondsAngle);

    context.drawImage (sechand, -4, -52, 8, 57);

    context.restore();

}

Теперь, когда циферблат был нарисован, необходимо восстановить контекст к его исходному состоянию, как сохранено, прежде чем произошло любое получение. Это подготавливает холст к любому будущему, рисующему, который произойдет и дает Вам непротиворечивый источник (верхний левый угол холста) для работы от.

Помните, все эти методы могут быть применены к объекту холста в любом основанном на WebKit приложении. Для получения дополнительной информации о холсте посмотрите Ссылку класса HTMLCanvasElement.

Доступ и управление данными холста

Safari 4.0 и более позднее непосредственное управление поддержкой пикселей холста. Можно получить данные необработанного пикселя холста с getImageData() функционируйте и создайте новый буфер для пикселей, которыми управляют, с createImageData() функция:

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

var currentPixels = context.getImageData(0, 0, canvas.width, canvas.height);

var newPixels = context.createImageData(canvas.width, canvas.height);

getImageData() и createImageData() функции оба возвращаются ImageData объект, содержащий информацию о пикселе в data свойство. data свойство является массивом, содержащим четыре значения между 0 и 255 для каждого пикселя в холсте. Эти значения соответствуют красному, зеленому, синему цвету, и альфа-компоненты пикселя. Доводящий до конца пример циклично выполняется data массив currentPixels переменная. Для каждого пикселя это вычитает значение каждого компонента цвета из 255 и присваивает результат соответствующей ячейке в data массив newPixels переменная, таким образом создавая инвертированную копию изображения. Альфа-значение каждого пикселя копируется без любого манипулирования. Наконец, newPixels переменная передается putImageData() функция, применяющая новые пиксельные значения к холсту.

for (var y = 0; y < newPixels.height; y += 1) {

    for (var x = 0; x < newPixels.width; x += 1) {

        for (var c = 0; c < 3; c += 1) {

            var i = (y*newPixels.width + x)*4 + c;

            newPixels.data[i] = 255 - currentPixels.data[i];

        }

        var alphaIndex = (y*newPixels.width + x)*4 + 3;

        newPixels.data[alphaIndex] = currentPixels.data[alphaIndex];

    }

}

context.putImageData(newPixels, 0, 0);

Можно также получить данные представление URL изображения холста с toDataURL() функция. Когда никакие параметры не передаются, эта функция возвращает кодирование PNG изображения. Можно получить другие форматы изображения путем передачи в строке, указывающей нужный формат, такой как image/jpg или image/gif.