Студопедия Главная Случайная страница Обратная связь

Разделы: Автомобили Астрономия Биология География Дом и сад Другие языки Другое Информатика История Культура Литература Логика Математика Медицина Металлургия Механика Образование Охрана труда Педагогика Политика Право Психология Религия Риторика Социология Спорт Строительство Технология Туризм Физика Философия Финансы Химия Черчение Экология Экономика Электроника

Метод drawImage





Подготовил: Евгений Рыжков Дата публикации: 14.10.2011

Выводит изображение на хосте. Имеет несколько вариантов синтаксиса с разными назначениями.

Базовый

Просто отображаем загруженную картинку.

drawImage(image, x, y)

Параметры

·image — объект Image();

·x,y — координаты верхнего левого угла изображения.

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

drawImage(image, x, y, width, height)

Параметры

·image — объект Image();

·x,y — координаты верхнего левого угла изображения;

·width, height — размеры изображения на холсте.

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

Обрезание

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

Параметры

·image — объект Image() или элемент canvas;

·sx, sy — координаты верхнего левого угла слайса относительно изображения;

·sWidth, sHeight — размеры слайса;

·dx,dy — координаты верхнего левого угла обрезанного изображения;

·dWidth, dHeight — размеры обрезанного изображения на холсте.


вырезаем слайс из текущего изображения


результирующую картинку позиционируем и масштабируем на холсте

Пример

Javascript


 

  var canvas = document.getElementById("picture");  
  var ctx = canvas.getContext('2d');  
     
  var img = new Image();  
  img.src = "path-to/ff.png";  
  img.onload = function(){  
  ctx.drawImage(img, 300, 100);  
  ctx.drawImage(img, 20, 39, 170, 140, 13, 15, 171, 142);
  }  
                   

 

 

Метод fill

Делает заливку фигуры.







Дата добавления: 2015-10-19; просмотров: 366. Нарушение авторских прав; Мы поможем в написании вашей работы!




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


ТЕОРЕТИЧЕСКАЯ МЕХАНИКА Статика является частью теоретической механики, изучающей условия, при ко­торых тело находится под действием заданной системы сил...


Теория усилителей. Схема Основная масса современных аналоговых и аналого-цифровых электронных устройств выполняется на специализированных микросхемах...


Логические цифровые микросхемы Более сложные элементы цифровой схемотехники (триггеры, мультиплексоры, декодеры и т.д.) не имеют...

Оценка качества Анализ документации. Имеющийся рецепт, паспорт письменного контроля и номер лекарственной формы соответствуют друг другу. Ингредиенты совместимы, расчеты сделаны верно, паспорт письменного контроля выписан верно. Правильность упаковки и оформления....

БИОХИМИЯ ТКАНЕЙ ЗУБА В составе зуба выделяют минерализованные и неминерализованные ткани...

Типология суицида. Феномен суицида (самоубийство или попытка самоубийства) чаще всего связывается с представлением о психологическом кризисе личности...

Ученые, внесшие большой вклад в развитие науки биологии Краткая история развития биологии. Чарльз Дарвин (1809 -1882)- основной труд « О происхождении видов путем естественного отбора или Сохранение благоприятствующих пород в борьбе за жизнь»...

Этапы трансляции и их характеристика Трансляция (от лат. translatio — перевод) — процесс синтеза белка из аминокислот на матрице информационной (матричной) РНК (иРНК...

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

Studopedia.info - Студопедия - 2014-2025 год . (0.009 сек.) русская версия | украинская версия