Его нельзя нарисовать непосредственно в Convas, и его нужно получить с помощью этого метода.
Следующий.
☆ Context.beginpath ()Указывает начало нового рисунка пути.
☆ Context.ispointinPath (x, y)Определите, находится ли точка на пути. Этот метод не применяется после преобразования системы координат.
☆ Context.moveto (x, y)Это эквивалентно подъему кисти с чертежной доски, оставляя чертежную доску, а затем позиционирует наконечник на
В координатах (x, y) начните новый рисунок на этой новой позиции.
☆ Context.lineto (x, y)Он эквивалентен кончику кисти, не покидающего чертежную доску, а наконечник щетки перемещается от текущего координатного положения в
Нарисуйте сегмент линии в координатах (x, y).
☆ Context.Stroke ()После того, как некоторые операции рисования должны назвать этот метод, чтобы получить чертеж находиться внутри
Контент дисплей.
☆ Context.save ()Этот метод спасает текущее состояние CRENS, независимо от каких -либо изменений в CRENS в будущем.
Просто сохраните состояние Convas, прежде чем внести эти изменения, и вы можете позвонить позже
Метод Context.Restore () восстанавливается в сохраненном состоянии. Обычно рисуется в новом разделе
или исходное состояние convas должно быть сохранено до изменения операции (рисунок или изменения не внесены
), восстановить его в исходном состоянии после завершения новой розыгрыша или операции модификации. этот
Это также способствует будущим операциям рисования.
На самом деле, контекст среды 2D на холсте обладает множеством свойств и некоторых методов с
Связанное с состоянием значение каждого атрибута изменяется (или какой-то метод используется для изменения состояния чертежа),
Состояние рисования меняется. При сохранении после каждого изменения, несколько состояний имущества будут
Сохраните его в виде стека, и партия Restore () может быть вызвана несколько раз в порядке стека.
Вернитесь в соответствующее сохраненное состояние.
☆ Context.translate (x, y)Этот метод перемещает текущее координатное происхождение на (x, y).
☆ Context.Restore ()Восстановите штат Convas до последнего спасенного состояния.
☆ Context.closepath ()Эта команда очень похожа по поведению на линето
функция, с разницей в том, что пункт назначения
автоматически предполагается
Происхождение пути. Тем не менее, The Clospath также сообщает
холст, который текущая форма закрыта или сформировал
Полностью содержится область. Это будет полезно для будущего
заполняет и удары.
На данный момент вы можете продолжить с большим количеством
сегменты на вашем пути, чтобы создать дополнительные подлины. Или ты
может начаться в любое время, чтобы начать все сначала и очистить путь
Список полностью.
☆ context.fill ();Заполните закрытый путь после установки стиля заполнения. Не нужно называть этот метод после вызова его
Context.Stroke () Метод.
☆ Контекст.Нарисуйте и заполните прямоугольную область шириной и длиной (ширина, высота) при (x, y). Регулировать
После использования этого метода вам не нужно снова вызывать метод context.stroke ().
☆ Context.strokerect (x, y, ширина, высота)Нарисуйте прямоугольный контур с шириной и длиной (ширина, высота) при (x, y).
☆ Context.clearrect (x, y, ширина, высота)Положение очистки (верхний левый угол прямоугольника) находится в (x, y,), а размер (ширина, высота)
прямоугольная область.
Удалить любой контент из прямоугольной области и сбросить его
к своему первоначальному прозрачному цвету.
Способность очищать прямоугольники в холсте - это ядро до
Создание анимации и игр с использованием HTML5 Canvas API. К
неоднократно рисовать и очищать секции холста, это
возможно представить иллюзию анимации, и многие
Примеры этого уже существуют в Интернете. Однако
Создать анимации, которые работают гладко, вам нужно будет
Использовать функции отсечения и, возможно, даже вторичный
буферированный холст, чтобы минимизировать мерцание, вызванное
Часто холст очищает.
☆ Context.drawimage ()Этот метод имеет три перегрузки для рисования изображения на холсте. Источник изображения может быть
Один кадр тега IMG на странице, объект изображения в JS и видео.
• Context.Drawimage (IMG, X, Y)
Нарисуйте изображение с изображением IMG AT (x, y). Когда размер холста больше изображения
, все изображение нарисовано; Когда изображение больше, чем холст, избыток обрезается.
• Context.Drawimage (Img, X, Y, W, H)
At (x, y), используйте изображение IMG, чтобы нарисовать прямоугольную область с длиной и шириной (W, H). изображение
Размер последовательности изменится на (w, h).
• Context.Drawimage (IMG, IMGX, IMGY, IMGW, IMGH, CX, CY,
CW, Ch)
Возьмите изображение IMG как объект рисования, а положение на IMG (IMGX, IMGY
) Площадь с размером (IMGW, IMGH) нарисована в положении холста (CX, CY)
Нарисуйте площадь размера (CW, CH).
Исключение брошено, если площадь обрезки на изображении выходит из диапазона изображений.
• Context.Drawimage (Video, VX, VY, VW, VH, CX, CY, CW, CH)
Возьмите видео -объект в качестве объекта рисования и возьмите позицию на видео как (vx, vy
) Рама с размером (VW, VH), рисует большой в положении на холсте (CX, CY)
Области с небольшими (CW, Ch).
Кроме того, первым параметром DrawMage () также может быть еще один холст.
☆ Context.getimagedata (x, y, ширина, высота)Этот метод получает размер (ширина, высота) от положения внутри холста (x, y)
Область пикселя, возвращаемое значение - это объект Imagedata. Imagedata имеет ширину,
высота и данные.
Атрибут данных представляет собой массив пикселей, и каждый четыре последовательных элемента в массиве представляют собой изображение
, Четыре последовательных элемента содержат информацию о цвете и прозрачности RGBA. Четыре последовательных элемента
Пиксель должен принадлежать к пикселю, а положение первого элемента не принимается по желанию.
Массив пикселей указан в порядке холста сверху вниз и слева направо.
Сканировать, чтобы получить. Количество элементов в массиве пикселей ширина * 4. 4. Чтобы получить конкретный
Пиксельная информация о местоположении.
Если вы откроете веб -страницу, используя этот метод в режиме локального файла, это не будет нормальным
Работа, обычно возникают ошибки безопасности. Вы можете загрузить файлы в
Затем веб -сервер запрашивает доступ для решения этой проблемы. И вовлеченные изображения, JS и
HTML должен быть от того же доменного имени. Тем не менее, IE9 можно получить через локальные файлы.
Пример заключается в следующем:
Скопировать код