Главная/ Учимся Javascript, CSS, HTML/ Уроки HTML/ Up And Running/ Lets Call It A Draw/ Простые фигуры. HTML5. Up and Running. Марк Пилгрим

Простые фигуры

Дата публикации: 16.03.2011

IE Firefox Safari Chrome Opera iPhone Android
7.0+ 3.0+ 3.0+ 3.0+ 10.0+ 1.0+ 1.0+

для IE требуется библиотека explorercanvas.

Каждый холст изначально пустой. Это скучно! Давай нарисуем что-нибудь. Можно использовать событие onClick для того чтобы нарисовать прямоугольник:

function draw_b() {
	var b_canvas = document.getElementById("b");
	var b_context = b_canvas.getContext("2d");
	b_context.fillRect(50, 25, 150, 100);
}

В первой строке функции нет ничего необычного: просто находим элемент <canvas> в DOM. Вторая строка более интересна. Каждый холст снабжен контекстом рисования (drawing context), где и происходит все самое интересное. Как только ты нашел элемент <canvas> (с помощью getElementById или любым другим знакомым тебе способом) можно вызвать метод getContext(). Вызываем его с параметром «2d»:

function draw_b() {
	var b_canvas = document.getElementById("b");
	var b_context = b_canvas.getContext("2d");
	b_context.fillRect(50, 25, 150, 100);
}

В: А что, есть и 3D холст?

О: Пока еще нет. Производители самостоятельно экспериментируют с этой темой, стандарта пока нет. HTML5 спецификация отмечает, что в будущем, скорее всего, появится и 3D.

Итак у нас есть холст и есть контекст. У контекста есть методы и свойства рисования. Например, целая группа свойств и методов, посвященных рисованию прямоугольников:

  • свойство fillStyle может задать CSS цвет, рисунок или градиент. По умолчанию fillStyle имеет значение «черный цвет», который можно сменить на любой другой. Каждый контекст помнит свои свойства, пока страница открыта, или ты что-нибудь не сделаешь для его сброса;
  • fillRect(x, y, width, height) рисует прямоугольник, заполненный заданным цветом fillStyle;
  • свойство strokeStyle, так же как fillStyle, может задать CSS цвет, рисунок и градиент;
  • strokeRect(x, y, width, height) рисует контур прямоугольника с цветом, указанным в strokeStyle. Сам прямоугольник цветом не заливается;
  • clearRect(x, y, width, height) очищает пиксели в указанном прямоугольнике.

В: Я могу сбросить настройки холста?

О: Да. Установка значения ширины (width) или высоты (height) холста приводит к очищению контекста холста и установке всех свойств по умолчанию. Необязательно даже менять свойство, можно просто переустановить текущее:

var b_canvas = document.getElementById("b");
b_canvas.width = b_canvas.width;

Вернемся к коду из предыдущего примера:

var b_canvas = document.getElementById("b");
var b_context = b_canvas.getContext("2d");
b_context.fillRect(50, 25, 150, 100);

Вызвав метод fillRect, мы нарисуем прямоугольник и закрасим его черным цветом, если не изменим настройки по умолчанию. У левого верхнего угла прямоугольника будут координаты (50,25). Ширина прямоугольника 150 и высота 100. Чтобы лучше понять как это работает, нужно познакомится с системой координат.

Куда дальше

Теги: , , ,
Показать комментарии