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

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

Метод 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. Нарушение авторских прав; Мы поможем в написании вашей работы!




Аальтернативная стоимость. Кривая производственных возможностей В экономике Буридании есть 100 ед. труда с производительностью 4 м ткани или 2 кг мяса...


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


Расчетные и графические задания Равновесный объем - это объем, определяемый равенством спроса и предложения...


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

ОЧАГОВЫЕ ТЕНИ В ЛЕГКОМ Очаговыми легочными инфильтратами проявляют себя различные по этиологии заболевания, в основе которых лежит бронхо-нодулярный процесс, который при рентгенологическом исследовании дает очагового характера тень, размерами не более 1 см в диаметре...

Примеры решения типовых задач. Пример 1.Степень диссоциации уксусной кислоты в 0,1 М растворе равна 1,32∙10-2   Пример 1.Степень диссоциации уксусной кислоты в 0,1 М растворе равна 1,32∙10-2. Найдите константу диссоциации кислоты и значение рК. Решение. Подставим данные задачи в уравнение закона разбавления К = a2См/(1 –a) =...

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

Реформы П.А.Столыпина Сегодня уже никто не сомневается в том, что экономическая политика П...

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

Особенности массовой коммуникации Развитие средств связи и информации привело к возникновению явления массовой коммуникации...

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