Что такое код fillrect


Содержание

Использование FillRect() в С++

Я новичок в использовании Graphics в Visual С++. Я просто пытаюсь сделать прямоугольник, заполненный цветом. Нужна помощь, чтобы исправить это.

ERROR: The variable ‘rect’ is being used without being initialized.

Обычно это предупреждение, а не ошибка. В этом случае он также кажется ложным.

Это может сработать лучше, если вы инициализируете его примерно так:

Обратите внимание на использование CreateSolidBrush — отличить цвет от HBRUSH вряд ли удастся.

Сбой кода из-за этого кода:

Вы не можете отличить цвет RGB до HBRUSH любым значимым образом. Единственный способ получить HBRUSH — попросить систему дать вам один.

Итак, вам нужно создать настоящую кисть, используя одну из функций API для этой цели. Например, CreateSolidBrush .

Когда вы закончите работу с кистью, вызовите DeleteObject , чтобы вернуть ресурсы в систему.

Как правило, каждый раз, когда вы пишете бросок, считайте код очень подозрительным. Всегда старайтесь писать код без приведения.

Что такое код fillrect

Параметры
lpRect
Указатель на структуру RECT, которая содержит логические координаты прямоугольника, который будет заполнен. Вы можете также передавать объект CRect для этого параметра.
pBrush
Идентифицирует кисть, используемую, чтобы заполнить прямоугольник.

Замечания
Вызовите эту функцию, чтобы заполнить данный прямоугольник, использующий определенную кисть. Функция заполняет полный прямоугольник, включая левые и верхние рамки, но это не заполняет рамки нижней части и правой.
Кисть должны быть создано, используя CBrush функции CreateHatchBrush, CreatePatternBrush, и CreateSolidBrush, или получена функцией GetStockObject Windows.
При заполнении определенного прямоугольника, FillRect не включает правую и нижнею части прямоугольника. GDI заполняет прямоугольник до, но не включает, правый столбец и строку нижних частей, независимо от текущего режима отображения. FillRect сравнивает значения верхней части, нижней части, левые, и правые элементы определенного прямоугольника. Если нижняя часть — меньше чем или равная верхней части, или если право — меньше чем или равное, чтобы оставить, прямоугольник не выведен.
FillRect подобен CDC::FillSolidRect однако, FillRect берет кисть и следовательно может использоваться, чтобы заполнить прямоугольник твердым цветом, заштрихованный кистями или образцом. FillSolidRect использует только твердых цвета (обозначенный параметром COLORREF). FillRect обычно медленнее чем FillSolidRect.

SDL_FillRect изменения значений

Im пытается покрыть небольшие прямоугольники внутри SDL_Surface * , используя SDL_FillRect() со следующим кодом:

х в диапазоне от 0 до 9, у находится в диапазоне от 0 до 21, tile_size мала (25 сейчас).

Когда этот код выполняется, вывод заключается в следующем:

Третья строка (первый отображается прямоугольник) каким-то образом перемещается от того, при -50 до 0. сбросив мои расчеты дисплея. Что не так? Я пропускаю что-то очевидное?

Я видел это , когда я просматривал документацию: «Если есть клип прямоугольник установить на месте назначения (устанавливается с помощью SDL_SetClipRect ) , то эта функция будет клип на основе пересечения клипа прямоугольника и dstrect прямоугольник и dstrect прямоугольнике будет изменено , чтобы представить площадь фактически заполнены «.

Это указывает на то, что клип прямоугольник вызывает проблему.

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

Вы можете это исправить, передав ссылку на копию dstrect .

FillRect function

The FillRect function fills a rectangle by using the specified brush. This function includes the left and top borders, but excludes the right and bottom borders of the rectangle.

Syntax

Parameters

A handle to the device context.

A pointer to a RECT structure that contains the logical coordinates of the rectangle to be filled.

A handle to the brush used to fill the rectangle.

Return Value

If the function succeeds, the return value is nonzero.

If the function fails, the return value is zero.

Remarks

The brush identified by the hbr parameter may be either a handle to a logical brush or a color value. If specifying a handle to a logical brush, call one of the following functions to obtain the handle: CreateHatchBrush, CreatePatternBrush, or CreateSolidBrush. Additionally, you may retrieve a handle to one of the stock brushes by using the GetStockObject function. If specifying a color value for the hbr parameter, it must be one of the standard system colors (the value 1 must be added to the chosen color). For example:

For a list of all the standard system colors, see GetSysColor.

When filling the specified rectangle, FillRect does not include the rectangle’s right and bottom sides. GDI fills a rectangle up to, but not including, the right column and bottom row, regardless of the current mapping mode.

Canvas, основы работы с помощью JavaScript

Добрый день, уважаемые читатели.

Сегодня я бы хотел с вами поделиться знаниями о таком интересном html5 элементе, как canvas. Этот новый элемент позволяет творить невероятные чудеса в окне браузера.

Что такое canvas и зачем он нужен?

Canvаs (холст) — элемент HTML5 для создания растрового двухмерного изображения. Обычно используется совместно с javascript.

Ширину и высоту canvas можно изменять.

Используется в основном для отрисовки графиков и игровый элементов в браузерных играх, вставки видео, создания полноценного плеера.

Canvas так же используется в WebGL для аппаратного ускорения 3D графики. В результате можно создавать даже 3D игры, работающие в окне браузера.

Создание нашего canvas

Создается canvas путем обычной вставки тега в html-код. Далее через обычный javascript мы получаем элемент и содержимое canvas (строка 10, 11) и рисуем обведенный прямоугольник, который растягивается на всю ширину и высоту canvas.

Примитивы в canvas

В canvas можно рисовать такие геометрические элементы, как:

  1. Прямоугольники
  2. Линии
  3. Окружности, дуги
  4. Различные кривые, эллипс

Прямоугольники

Самая простая фигура для canvas — прямоугольник. Чтобы его нарисовать нам нужна всего одна строчка кода.


Есть еще 2 варианта для рисования прямоугольников:

Ниже приведен пример использования этих 2-х способов:

В результате мы нарисовали большой черный прямоугольник и вырезали область из точки (50, 50) размером 300 пикселей по ширине и 200 пикселей по высоте. Ниже представлено, как это будет выглядеть.

Более интересный пример:

Ниже пример, как это выглядит:

Линии, окружности, дуги

Рисование фигур из линий происходит немного сложней. Здесь используется 4 метода:

Так же нам понадобятся следующие методы для рисования линий:

Ниже приведен пример использования данных методов:

Вот такая замечательная звезда у нас получилась:

Кривая Безье

Нарисовать любую фигуру так же можно с помощью кривых Безье. Для этого используется 2 метода quadraticCurveTo, bezierCurveTo. Для кривых Безье должна быть задана начальная точка, от которой будет прорисовываться фигура.

Все, вроде, хорошо, но вот постоянно рисовать черным цветом не очень интересно. Разнообразим!

Цвет линий и заливки в canvas

Для задания цвета есть 2 свойства: fillStyle и strokeStyle. Задать цвет можно несколькими вариантами:

Попробуем что-нибудь раскрасить, используя разные способы задания цвета:

На этом пока все.

Спасибо за внимание! Жду вас в следующей статье!

Подписываемся на рассылку ��

Автор статьи: Alex. Категория: JavaScript
Дата публикации: 19.02.2014

Rectangle, DrawRectangle, FillRect/FillRectangle

Здравствуйте, постоянные читатели моего сайта о программировании и математике. На этой странице рассмотрим процедуры Rectangle, DrawRectangle, FillRect/FillRectangle графического модуля GraphABC для рисования прямоугольников. Почему так много процедур? Почему бы не обойтись одной какой-нибудь подпрограммой? Да потому, что разные процедуры рисуют прямоугольники по-разному. Начнем с определения первой из них.

Процедура Rectangle

procedure Rectangle(x1,y1,x2,y2: integer);

— Рисует заполненный прямоугольник, заданный координатами противоположных вершин (x1, y1) и (x2, y2)

Прямоугольник, построенный с помощью Rectangle имеет границы и его можно залить (закрасить), предварительно задав цвет процедурой SetBrushColor(. ). Для задания толщины границы вызываем процедуру SetPenWidth(. ), для цвета границы вызываем SetPenColor(. ).

Мы уже упоминали раньше, что здесь в разделе о графике мы повсюду имеем дело с пикселями. Наиболее широко работа с пикселями и сглаживанием изображений ведется в современном телевидении высокого разрешения, или технологий, работающих с ним. Примером может служить приставка tv box cs918 android.

Следует помнить: если не задавать цвета и толщину границы, то задействуются умолчания – толщина границы 1px, цвет границы – черный, цвет заливки – белый. Поэтому, чтобы показать наш прямоугольник «во всей красе», зададим некоторые параметры сами. Возьмите код ниже и вставьте в среду PascalABC или PascalABC.Net. Вообще я рекомендую не копировать, а переписывать руками (если, конечно, код не слишком большой), поскольку так лучше запоминается, сам проверил. Смотрим, что у нас получись:

Илон Маск рекомендует:  Что такое код snmprealwalk

Процедура DrawRectangle

procedure DrawRectangle(x1,y1,x2,y2: integer);

— Рисует границу прямоугольника, заданного координатами противоположных вершин (x1, y1) и (x2, y2)

Процедура DrawRectangle рисует только границу прямоугольника и не заливает область цветом (применять SetBrushColor бессмысленно – она не сработает). К тому же, данная подпрограмма отсутствует в простом PascalABC. Поэтому открываем PascalABC.Net и запускаем на выполнение следующий код.

Если уберем 8 и 9 строки кода (толщина и цвет пера), то граница нашого прямоугольника будет черной и толщиной 1px. Кстати, использовать переменные x1, x2, y1, y2 для координат не обязательно – их записано только для наглядности. Можно просто вставить числа в процедуру, и тогда предыдущая программа будет выглядеть так:

Процедуры FillRect, FillRectangle

Процедуры FillRect и FillRectangle делают одно и то же – заполняют область прямоугольника цветом. Сам прямоугольник при этом границ не имеет, поэтому задавать цвет и толщину с помощью пера Pen не имеет смысла – никакой границы не будет. Разница между ними в данном случае в том, что FillRectangle отсутствует в PascalABC, зато в версии PascalABC.Net присутствуют оба варианта.

Вот определение каждой из них:

procedure FillRect(x1,y1,x2,y2: integer);

— Заливает прямоугольник, заданный координатами противоположных вершин (x1, y1) и (x2, y2), цветом текущей кисти.

procedure FillRectangle(x1,y1,x2,y2: integer);

— Заполняет внутренность прямоугольника, заданного координатами противоположных вершин (x1, y1) и (x2, y2)

Простая программа, демонстрирующая сказанное выше. Для заливки прямоугольника мы использовали здесь процедуру FillRect, поэтому данную программу можно запускать как минимум в PascalABC и PascalABC.Net.

Вот похожие темы:

Если есть вопросы, или подсказки как улучшить статью, то пишите в комментариях. Всего доброго, удачи!

FMX.Graphics.TCanvas.FillRect

Contents

Properties

Description

Fills a rectangle with customized corners on the current TCanvas.

FillRect is implemented by TCanvas descendants to fill—with the current brush specified by the Fill property or with the brush specified by the ABrush parameter—the ARect rectangle with customized shapes of corners.

ARect specifies the rectangle to be filled.

XRadius specifies the distance from a corner to the start point of the customization on horizontal sides. The maximum value of XRadius is half of the ARect rectangle’s width.

YRadius specifies the distance from a corner to the start point of the customization on vertical sides. The maximum value of YRadius is half of the ARect rectangle’s height.


ACorners specifies the corners to apply the customization to. ACorners can contain a set of constants defined in the TCorner type: TopLeft , TopRight , BottomLeft , and BottomRight . To apply the customization to all corners, use the AllCorners constant.

AOpacity specifies the transparency of the Fill or ABrush color.

ABrush specifies the TBrush color and pattern to use for filling the rectangle.

ACornerType specifies the TCornerType type of corner shapes’ customization. It is an optional parameter with a default value of Round .

Введение в Canvas

В этой статье мы познакомим вас c новым элементом HTML5 — canvas, который позволяет рисовать различные объекты и отображать в самых современных браузерах. Прочитав данный урок, вы узнаете, как получить доступ к элементу canvas, рисовать фигуры, изменять цвета, и стирать объекты. Приобретайте путёвку в современный мир Web технологий.

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

Знакомимся с элементом Canvas

Использовать элемент canvas очень просто

Когда вы слышите слово canvas, то вы сразу же думаете о новом HTML5 элементе с одноимённым названием. Технически, это только половина всей правды, но давайте не будем сейчас говорить об этом. Элемент canvas — это нововведение для всех браузеров.

Для того чтобы воспользоваться элементом canvas, необходимо просто создать соответствующий HTML тег, а затем определить ширину и высоту.

Но это конечно же далеко не всё. Код, написанный выше поместит на вашу страницу canvas с прозрачным фоном. Внимание: контент внутри тега canvas будет отображён только в том случае, если ваш браузер является устаревшим и не поддерживает данную функциональность.

Поддержка

Этот элемент только для самых современных браузеров

Должен отметить, что самые современные браузеры поддерживают данный элемент, даже последний Internet Explorer.

  • Internet Explorer (9.0+)
  • Safari (3.0+)
  • Firefox (3.0+)
  • Chrome (3.0+)
  • Opera (10.0+)
  • iOS (1.0+)
  • Andro >К слову сказать, вы можете активировать данный элемент и в ранних версиях Internet Explorer при помощи данного плагина – Explorer Canvas.

Размеры элемента Canvas

В примере, расположенном выше вы уже увидели как применять атрибуты ширины и высоты: width и height. Используя CSS, вы также можете контролировать размеры canvas, как и других HTML элементов. И это вполне логично. Однако так как canvas использует в своём функционале так называемый двумерный контекст, то при применении CSS к размерам холста, приведёт к тому, что все внутренние элементы будут искажены.

Немного о двумерном контексте

Немного выше я сказал, что элемент canvas — это только половина всей истории. Вторая половина — это как раз и есть двумерный контекст, который по сути позволяет вам видеть и всю мощь функционала данного элемента.

Давайте расставим всё на свои места: когда мы используем элемент canvas, то фактически он не помещается на страницу. Вместо него вы получаете рисунок, который формируется в двумерном контексте, а доступ к этому рисунку осуществляется как раз через элемент canvas благодаря JavaScript API. В принципе кому-то эта информация может показаться лишней, однако лишние знания вам не повредят.

Система координат

Если вы когда-либо работали с языками, имеющими дело с 2d графикой (такими как ActionScript, Processing, и т.д.), тогда вы знаете всё о системах координат, основанных на движении. Двумерный контекст в элементе canvas ничем не отличается от перечисленных систем. Он использует стандартную систему координат Cartesian, с начальной точкой (0, 0), расположенной с левой верхней стороны. Движение вправо будет увеличивать значение объекта по оси x, в то время как движение вниз, будет увеличивать значения точек объекта по оси y. Всё довольно примитивно.

Одна единица данной системы координат равняется одному пикселю вашего экрана (в большинстве случаев).

Получение доступа к двумерному контексту

Для того чтобы получить доступ к двумерному контексту, вам понадобится применить JavaScript API. В данном случае, вам потребуется функция getContext. Пример:

Заметьте: в этом примере мы применяем jQuery, но только после того, как страница полностью загрузится. Для этих целей вы можете в полной мере пользоваться вашим любимым JavaScript фрэймворком или поместить скрипт в конец документа.

В результате вызова метода getContext, переменная ctx теперь будет ссылаться на двумерный контекст. Это означает, что теперь при помощи этой переменной вы можете начать рисовать фигуры на элементе canvas. Круто, да?!

Рисуем квадраты

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

Добавьте следующий код, используя переменную ctx, о которой мы говорили перед этим:

Этот код нарисует чёрный квадрат в левой верхней стороне холста. Примерно вот так вот:

Поздравляю! Вы только что нарисовали вашу первую фигуру в HTML5 элементе canvas. Каковы ощущения?

Заметьте: вы скорее всего уже смекнули, что на самом деле для рисования квадрата используется JavaScript. Это происходит потому, что в функциональности элемента canvas не предусматривается подобного метода (для рисования квадрата). На самом деле квадрат — это тот же самый прямоугольник, у которого все стороны равны.

В методе fillRect может быть прописано 4 параметра:

  • Первый — это позиция по оси x;
  • Второй — это позиция по оси y;
  • Третий — это параметр, отвечающий за ширину;
  • Четвёртый — это высота.

Если расписать прототип метода в псевдокоде, то он будет выглядеть следующим образом:

Хорошая новость заключается в том, что вы не ограничены в функционале, касающемся заливки. Уточню. Вы можете рисовать прямоугольник с прозрачной заливкой и цветной рамкой.Для этого в JavaScript API предусмотрена специальная функция strokeRect:

Данная функция принимает такой же набор аргументов, как и fillRect. В результате вы получите ещё один квадрат:

Просто. Элегантно. И ещё раз просто! Теперь вы поняли принцип, по которому работает элемент canvas. Все остальные методы подобны этим двум. Их использовать так же просто. Если вам кажется это чем-то примитивным, то не переживайте. Все эти элементы в совокупности могут творить чудеса.

Рисование по схеме

Помимо прямоугольников (которые могут быть нарисованы одним методом из API), вы так же можете рисовать фигуры по собственной схеме. Благодаря схемам вы можете создавать прямые или изогнутые линии, а так же более сложные фигуры.

Чтобы создать полноценную схему, вам необходимо будет воспользоваться следующими методами из API:

  • beginPath: начало схемы;
  • moveTo: метод для создания точки;
  • lineTo: рисует линию от точки до точки, которые были созданы методом moveTo, или до точки от прошлой линии, нарисованной методом lineTo;
  • closePath: завершить схему.
  • fill: заполнить фигуру цветом.
  • stroke: создать контур.

Попробуйте следующий пример:

Данный код нарисует треугольник чёрного цвета:

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

Стоит сказать об этом именно сейчас: рисование по схеме применяется для создания более сложных фигур чем прямоугольники.

Изменение цветов

Итак, всё что мы рисовали до сих пор, будь то прямоугольник или треугольник, окрашивалось в чёрный цвет. Круто! Однако, существует множество функций в JavaScript API, которые позволят вам с лёгкостью изменить цвет фигуры, которую вы рисуете. Вашему вниманию представляю fillStyle и strokeStyle.


Объявлять тут в принципе нечего, поэтому давайте сразу же применим их на практике:

Данный код окрасит квадрат в красный цвет:

Или вы можете изменить цвет рамки квадрата:

Вот вы и научились применять данные методы:

Методы fillStyle и strokeStyle удобны тем, что они используют те же цвета, что и в привычном вам CSS. Это значит, что вы можете использовать RGB, RGBA, HSA, специальные слова (“red”) и шестнадцатеричные значения.

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

Изменение толщины линий

Теперь плавно перейдём от изменения цветов к изменению значения толщины линий. Для данного функционала существует ещё один метод из JavaScript API — lineWidth.

Можете добавить данный код в прошлый пример:

И вот какой у вас получится результат:

Такой же принцип вы можете применить со схемами. К примеру, вы можете изменить пример с треугольником:

И вот что у вас получится:

Также в JavaScript API, существует ещё метод, который позволят вам изменить вид линий. К примеру, lineCap изменяет вид отображения конца линии, а lineJoin изменят отображение углов. Более подробную информацию вы можете найти в спецификации.

Стираем объекты из Canvas

Последняя вещь, которую я хочу вам сегодня показать – это стирание объектов. Вы уже знаете, как нарисовать фигуру. Теперь пришло время узнать как от неё избавиться :)

В принципе тут всё так же просто; вам нужно всего-навсего воспользоваться очередным методом из JavaScript API. Этот метод называется clearRect. Его задача заключается в том, чтобы сделать каждый указанный пиксель полностью прозрачным.

В этом примере на canvas 500px в ширину и 500px в высоту. Для очищения всей площади, вам необходимо сделать следующее:

В этом примере скорее всего не нужно подтверждать работу кода скриншотом, так как вы ничего не увидите. Квадрат действительно был нарисован, а затем мгновенно стёрт.

Заметьте: аргументы для метода clearRect точно такие же, как и для fillRect; x, y, ширина и высота.

Если вы не определились с высотой и шириной, то можете писать и так:

Стирание небольших фрагментов

Для того чтобы стереть небольшой фрагмент, вам не обязательно зачищать всю площадь элемента canvas. Вы без проблем можете стереть необходимую вам область. Представьте, что у вас нарисовано 2 квадрата, один из которых вы хотите стереть:

На данный момент картина такая:

Вы без проблем можете стереть черный квадрат, а красный оставить на месте при помощи метода clearRect:

Заметьте, что данные должны совпадать с теми, что вы указывали при создании элемента. На самом деле данный метод просто изменяет прозрачность каждого пискеля:

Довольно-таки просто, не так ли? Вы нечасто будете стирать элементы при рисовании, однако эти знания понадобятся вам, когда мы будем учиться делать анимацию.

Идём в ногу со временем

Canvas прост в использовании и изучении

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

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

А сейчас, я надеюсь, вы получили много полезной информации, которая позволит вам получить общее представление об canvas. Данный элемент — это фантастическая технология, которая позволит вам реализовать все фантазии, которые хранятся у вас в голове.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.net.tutsplus.com/tutorials/javascript-ajax/canvas-from-scratch-introducing-canvas/
Перевел: Станислав Протасевич
Урок создан: 28 Марта 2011
Просмотров: 59884
Правила перепечатки

5 последних уроков рубрики «HTML и DHTML»

Лайфхак: наиполезнейшая функция var_export()

При написании или отладки PHP скриптов мы частенько пользуемся функциями var_dump() и print_r() для вывода предварительных данных массив и объектов. В этом посте я бы хотел рассказать вам о функции var_export(), которая может преобразовать массив в формат, пригодный для PHP кода.

17 бесплатных шаблонов админок

Парочка бесплатных шаблонов панелей администрирования.

30 сайтов для скачки бесплатных шаблонов почтовых писем

Создание шаблона для письма не такое уж простое дело. Предлагаем вам подборку из 30 сайтов, где можно бесплатно скачать подобные шаблоны на любой вкус.

Как осуществить задержку при нажатии клавиши с помощью jQuery?

К примеру у вас есть поле поиска, которое обрабатывается при каждом нажатии клавиши клавиатуры. Если кто-то захочет написать слово Windows, AJAX запрос будет отправлен по следующим фрагментам: W, Wi, Win, Wind, Windo, Window, Windows. Проблема?.

15 новых сайтов для скачивания бесплатных фото

Подборка из 15 новых сайтов, где можно скачать бесплатные фотографии для заполнения своих сайтов.

Учим HTML5 Canvas за 30 минут

Сегодня будет легкий, но классный урок. Мы познакомимся с HTML 5 Canvas.

С помощью Canvas Вы сможете создавать интересные эффекты на странице, разрабатывать игры и полезные графические инструменты. При этом всем работа с HTML 5 Canvas осуществляется посредством языка программирования JavaScript, но там все очень просто. Его поддержка радует во всех смыслах, так как Canvas поддерживается практически везде, даже на старых версиях Internet Explorer.

Соответственно мы разберем работу с самим тегом Canvas, поговорим о его особенностях и нарисуем простейшие графические примитивы, такие как квадрат, круг, треугольник. Затем с полученными знаниями разработаем простенькую программу, позволяющую рисовать, а затем на автомате воспроизводить рисунок. Такая штука раньше была очень популярна на Facebook.

Поехали!

Для начала создадим обычную структуру HTML документа и разместим тег Canvas. Напишем между тегами текст, который будет отображаться, если браузер не поддерживает Canvas. Также имеет смысл дать идентификатор >

Теперь есть смысл начинать писать наш код.

Первое, что нужно сделать в скрипте это подгрузить сам Canvas.

Далее создадим переменную, которая вообще-то называется context, но стандартно пишут ctx. Она будет хранить в себе контекст этого загруженного canvas-a. Загружается он легко, просто обращаетесь к этой переменной canv и вызываете метод getContext. Первым аргументом указываете, какой хотите контекст. Их стандартно 4, но чаще всего используется двумерный контекст, то есть 2d.

Пропишем высоту и ширину Canvas так, чтобы он отображался на всю страницу. По умолчанию его параметры 300x150px. Чтобы не появлялись полосы прокрутки необходимо прописать тегу Canvas значение display: block.


Приступим к рисованию прямоугольника!

Первое, что мы сделаем — нарисуем прямоугольник. Для этого нужно обратиться к нашему контекту, то есть к переменной ctx и указать свойство fillStyle, хотя можно этого не делать и тогда цвет у прямоугольника будет черный.

Далее вызываем метод fillRect, который отвечает за то, чтобы нарисовать непосредственно сам квадрат. Он принимает 4 аргумента: позиции по оси X и Y, на который будет начинаться наш будущий прямоугольник.

После того как Вы сохраните документ и обновите в браузере страницу, то увидите долгожданный прямоугольник.

При этом мы можем его очень просто анимировать. Для этого создаем простую переменную, например, x, которая будет хранить расположение прямоугольника по оси X.

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

Получаем вот такой код и анимацию

Вообще-то делать анимацию в Canvas через setInterval нет особого смысла, это делается через requestAnimationFrame.

Как нарисовать прямоугольник, но не заполнять его? Чтобы у него были только border-ы. Для этого есть метод strokeRect, который принимает точно те же аргументы, что и fillRect

На выходе Вы получается вот это:

Можно обратить внимание, что цвет border-a прямоугольника не magenta. Так происходит, потому что он вызывается не через fill, а через stroke.

Можно изменить цвет обводки прямоугольника, а заодно и его ширину следующим образом:

Учимся делать круг!

Круг на Canvas делается также очень просто. Для этого есть метод arc. Он принимает 6 параметров: 1 — позиция по оси x, 2 — позиция по оси y, 3 — радиус круга, 4 — начало угла (start angle), 5 — конец угла (end angle), 6 – рисовать круг по часовой стрелке или против. Последний параметр не обязательный. Start angle начинается справа, так как он задается в медианах и когда Вы указываете end angle, то указываете как далеко он пойдет.

Введение в Canvas

В этой статье мы познакомим вас c новым элементом HTML5 — canvas, который позволяет рисовать различные объекты и отображать в самых современных браузерах. Прочитав данный урок, вы узнаете, как получить доступ к элементу canvas, рисовать фигуры, изменять цвета, и стирать объекты. Приобретайте путёвку в современный мир Web технологий.

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

Знакомимся с элементом Canvas

Использовать элемент canvas очень просто

Когда вы слышите слово canvas, то вы сразу же думаете о новом HTML5 элементе с одноимённым названием. Технически, это только половина всей правды, но давайте не будем сейчас говорить об этом. Элемент canvas — это нововведение для всех браузеров.

Для того чтобы воспользоваться элементом canvas, необходимо просто создать соответствующий HTML тег, а затем определить ширину и высоту.

Но это конечно же далеко не всё. Код, написанный выше поместит на вашу страницу canvas с прозрачным фоном. Внимание: контент внутри тега canvas будет отображён только в том случае, если ваш браузер является устаревшим и не поддерживает данную функциональность.

Поддержка

Этот элемент только для самых современных браузеров

Должен отметить, что самые современные браузеры поддерживают данный элемент, даже последний Internet Explorer.

  • Internet Explorer (9.0+)
  • Safari (3.0+)
  • Firefox (3.0+)
  • Chrome (3.0+)
  • Opera (10.0+)
  • iOS (1.0+)
  • Andro >К слову сказать, вы можете активировать данный элемент и в ранних версиях Internet Explorer при помощи данного плагина – Explorer Canvas.

Размеры элемента Canvas

В примере, расположенном выше вы уже увидели как применять атрибуты ширины и высоты: width и height. Используя CSS, вы также можете контролировать размеры canvas, как и других HTML элементов. И это вполне логично. Однако так как canvas использует в своём функционале так называемый двумерный контекст, то при применении CSS к размерам холста, приведёт к тому, что все внутренние элементы будут искажены.

Немного о двумерном контексте

Немного выше я сказал, что элемент canvas — это только половина всей истории. Вторая половина — это как раз и есть двумерный контекст, который по сути позволяет вам видеть и всю мощь функционала данного элемента.

Давайте расставим всё на свои места: когда мы используем элемент canvas, то фактически он не помещается на страницу. Вместо него вы получаете рисунок, который формируется в двумерном контексте, а доступ к этому рисунку осуществляется как раз через элемент canvas благодаря JavaScript API. В принципе кому-то эта информация может показаться лишней, однако лишние знания вам не повредят.

Система координат

Если вы когда-либо работали с языками, имеющими дело с 2d графикой (такими как ActionScript, Processing, и т.д.), тогда вы знаете всё о системах координат, основанных на движении. Двумерный контекст в элементе canvas ничем не отличается от перечисленных систем. Он использует стандартную систему координат Cartesian, с начальной точкой (0, 0), расположенной с левой верхней стороны. Движение вправо будет увеличивать значение объекта по оси x, в то время как движение вниз, будет увеличивать значения точек объекта по оси y. Всё довольно примитивно.

Одна единица данной системы координат равняется одному пикселю вашего экрана (в большинстве случаев).

Получение доступа к двумерному контексту

Для того чтобы получить доступ к двумерному контексту, вам понадобится применить JavaScript API. В данном случае, вам потребуется функция getContext. Пример:

Заметьте: в этом примере мы применяем jQuery, но только после того, как страница полностью загрузится. Для этих целей вы можете в полной мере пользоваться вашим любимым JavaScript фрэймворком или поместить скрипт в конец документа.

В результате вызова метода getContext, переменная ctx теперь будет ссылаться на двумерный контекст. Это означает, что теперь при помощи этой переменной вы можете начать рисовать фигуры на элементе canvas. Круто, да?!

Рисуем квадраты

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

Добавьте следующий код, используя переменную ctx, о которой мы говорили перед этим:

Этот код нарисует чёрный квадрат в левой верхней стороне холста. Примерно вот так вот:

Поздравляю! Вы только что нарисовали вашу первую фигуру в HTML5 элементе canvas. Каковы ощущения?

Заметьте: вы скорее всего уже смекнули, что на самом деле для рисования квадрата используется JavaScript. Это происходит потому, что в функциональности элемента canvas не предусматривается подобного метода (для рисования квадрата). На самом деле квадрат — это тот же самый прямоугольник, у которого все стороны равны.

В методе fillRect может быть прописано 4 параметра:

  • Первый — это позиция по оси x;
  • Второй — это позиция по оси y;
  • Третий — это параметр, отвечающий за ширину;
  • Четвёртый — это высота.

Если расписать прототип метода в псевдокоде, то он будет выглядеть следующим образом:

Хорошая новость заключается в том, что вы не ограничены в функционале, касающемся заливки. Уточню. Вы можете рисовать прямоугольник с прозрачной заливкой и цветной рамкой.Для этого в JavaScript API предусмотрена специальная функция strokeRect:

Данная функция принимает такой же набор аргументов, как и fillRect. В результате вы получите ещё один квадрат:

Просто. Элегантно. И ещё раз просто! Теперь вы поняли принцип, по которому работает элемент canvas. Все остальные методы подобны этим двум. Их использовать так же просто. Если вам кажется это чем-то примитивным, то не переживайте. Все эти элементы в совокупности могут творить чудеса.

Рисование по схеме


Помимо прямоугольников (которые могут быть нарисованы одним методом из API), вы так же можете рисовать фигуры по собственной схеме. Благодаря схемам вы можете создавать прямые или изогнутые линии, а так же более сложные фигуры.

Чтобы создать полноценную схему, вам необходимо будет воспользоваться следующими методами из API:

  • beginPath: начало схемы;
  • moveTo: метод для создания точки;
  • lineTo: рисует линию от точки до точки, которые были созданы методом moveTo, или до точки от прошлой линии, нарисованной методом lineTo;
  • closePath: завершить схему.
  • fill: заполнить фигуру цветом.
  • stroke: создать контур.

Попробуйте следующий пример:

Данный код нарисует треугольник чёрного цвета:

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

Стоит сказать об этом именно сейчас: рисование по схеме применяется для создания более сложных фигур чем прямоугольники.

Изменение цветов

Итак, всё что мы рисовали до сих пор, будь то прямоугольник или треугольник, окрашивалось в чёрный цвет. Круто! Однако, существует множество функций в JavaScript API, которые позволят вам с лёгкостью изменить цвет фигуры, которую вы рисуете. Вашему вниманию представляю fillStyle и strokeStyle.

Объявлять тут в принципе нечего, поэтому давайте сразу же применим их на практике:

Данный код окрасит квадрат в красный цвет:

Или вы можете изменить цвет рамки квадрата:

Вот вы и научились применять данные методы:

Методы fillStyle и strokeStyle удобны тем, что они используют те же цвета, что и в привычном вам CSS. Это значит, что вы можете использовать RGB, RGBA, HSA, специальные слова (“red”) и шестнадцатеричные значения.

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

Изменение толщины линий

Теперь плавно перейдём от изменения цветов к изменению значения толщины линий. Для данного функционала существует ещё один метод из JavaScript API — lineWidth.

Можете добавить данный код в прошлый пример:

И вот какой у вас получится результат:

Такой же принцип вы можете применить со схемами. К примеру, вы можете изменить пример с треугольником:

И вот что у вас получится:

Также в JavaScript API, существует ещё метод, который позволят вам изменить вид линий. К примеру, lineCap изменяет вид отображения конца линии, а lineJoin изменят отображение углов. Более подробную информацию вы можете найти в спецификации.

Стираем объекты из Canvas

Последняя вещь, которую я хочу вам сегодня показать – это стирание объектов. Вы уже знаете, как нарисовать фигуру. Теперь пришло время узнать как от неё избавиться :)

В принципе тут всё так же просто; вам нужно всего-навсего воспользоваться очередным методом из JavaScript API. Этот метод называется clearRect. Его задача заключается в том, чтобы сделать каждый указанный пиксель полностью прозрачным.

В этом примере на canvas 500px в ширину и 500px в высоту. Для очищения всей площади, вам необходимо сделать следующее:

В этом примере скорее всего не нужно подтверждать работу кода скриншотом, так как вы ничего не увидите. Квадрат действительно был нарисован, а затем мгновенно стёрт.

Заметьте: аргументы для метода clearRect точно такие же, как и для fillRect; x, y, ширина и высота.

Если вы не определились с высотой и шириной, то можете писать и так:

Стирание небольших фрагментов

Для того чтобы стереть небольшой фрагмент, вам не обязательно зачищать всю площадь элемента canvas. Вы без проблем можете стереть необходимую вам область. Представьте, что у вас нарисовано 2 квадрата, один из которых вы хотите стереть:

На данный момент картина такая:

Вы без проблем можете стереть черный квадрат, а красный оставить на месте при помощи метода clearRect:

Заметьте, что данные должны совпадать с теми, что вы указывали при создании элемента. На самом деле данный метод просто изменяет прозрачность каждого пискеля:

Довольно-таки просто, не так ли? Вы нечасто будете стирать элементы при рисовании, однако эти знания понадобятся вам, когда мы будем учиться делать анимацию.

Идём в ногу со временем

Canvas прост в использовании и изучении

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

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

А сейчас, я надеюсь, вы получили много полезной информации, которая позволит вам получить общее представление об canvas. Данный элемент — это фантастическая технология, которая позволит вам реализовать все фантазии, которые хранятся у вас в голове.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.net.tutsplus.com/tutorials/javascript-ajax/canvas-from-scratch-introducing-canvas/
Перевел: Станислав Протасевич
Урок создан: 28 Марта 2011
Просмотров: 59885
Правила перепечатки

5 последних уроков рубрики «HTML и DHTML»

Лайфхак: наиполезнейшая функция var_export()

При написании или отладки PHP скриптов мы частенько пользуемся функциями var_dump() и print_r() для вывода предварительных данных массив и объектов. В этом посте я бы хотел рассказать вам о функции var_export(), которая может преобразовать массив в формат, пригодный для PHP кода.

17 бесплатных шаблонов админок

Парочка бесплатных шаблонов панелей администрирования.

30 сайтов для скачки бесплатных шаблонов почтовых писем

Создание шаблона для письма не такое уж простое дело. Предлагаем вам подборку из 30 сайтов, где можно бесплатно скачать подобные шаблоны на любой вкус.

Как осуществить задержку при нажатии клавиши с помощью jQuery?

К примеру у вас есть поле поиска, которое обрабатывается при каждом нажатии клавиши клавиатуры. Если кто-то захочет написать слово Windows, AJAX запрос будет отправлен по следующим фрагментам: W, Wi, Win, Wind, Windo, Window, Windows. Проблема?.

15 новых сайтов для скачивания бесплатных фото

Подборка из 15 новых сайтов, где можно скачать бесплатные фотографии для заполнения своих сайтов.

Илон Маск рекомендует:  Excel vba как обратиться к ячейке по ее имени
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL
Type Visibility Source Unit Parent