Архитектура Аудит Военная наука Иностранные языки Медицина Металлургия Метрология Образование Политология Производство Психология Стандартизация Технологии |
DrawImage(image, x, y, width, height) ⇐ ПредыдущаяСтр 5 из 5
Где width и height ширина и высота изображения на холсте. Пример 2 использования изображения В этом примере мы используем одно изображение как обои чтобы повторить его на холсте несколько раз. Это осуществляется с помощью цикла и размещения масштабных изображений на разных позициях. В этом примере первый цикл for отсчитывает ряды а второй цикл for отсчитывает колоны. Изображение равно одной третьей исходного изображения (50x38 пикселей). Примечание: При масштабировании изображение теряет качество, а текст теряет очертания. Посмотреть этот пример function draw() { var ctx = document.getElementById('canvas').getContext('2d'); var img = new Image(); img.onload = function(){ for (i=0; i< 4; i++){ for (j=0; j< 3; j++){ ctx.drawImage(img, j*50, i*38, 50, 38); } } } img.src = 'images/rhino.jpg'; }Разрезание изображений Третий и последный типа метода drawImage включает 8 новых параметров. Мы будем использовать этот метод чтобы отбражать часть изображения на холсте DrawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) Первый параметр image, определяет идентификатор изображения. Следующие 2 элемента определяют положения верхнего левого угла вырезаного изображения относительного исходного положения а, следующие два параметра определяют высоту и ширину вырезаного изображения. Следующие два параметра определяют положение изображения на холсте а, следующие два параметра масштаб изображения. Разрезание можно использовать чтобы обьеденить все элементы в один файл, что позволяет ускорить работу сайта а, также не загружать все элементы по отдельности.
Пример 3 использования изображения В этом примере мы будем вырезать голову носорога и вставлять ее в рамку. В этом примере мы используем другой подход к загрузке изображений, чем в примере выше.Мы просто размечаем изображения непосредственно в HTML документе и используем правила CSS, чтобы скрыть их. Обоим изображениям мы присваиваем атрибут id чтобы их было легче выбрать. Скрипт сам по себе очень прост. Сначала мы вырезаем голову носорого и помещаем ее на холст а, затем помещаем изображение рамки на холст.
Посмотреть этот пример function draw() { var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); // Draw slice ctx.drawImage(document.getElementById('source'), 33, 71, 104, 124, 21, 20, 87, 104); // Draw frame ctx.drawImage(document.getElementById('frame'), 0, 0); }Пример галереи В финальном примере мы сделаем простую галерею изображений. Галерея состоит из таблицы содержащей несколько изображений. При загрузке страницы каждое изображение вставляется на холст а, затем и рамка вокруг него. Код ниже, должен говорить сам за себя. Мы используем цикл и добавляем новые элементы на холст. Наверное, единственное, что можно отметить, для тех, кто не очень знаком с DOM, является использование insertBefore метода. insertBefore это метод родительского узла (ячейки таблицы) в который мы хотим вставить наш новый узел (холст). Посмотреть этот пример
Итак существует три перегруженных функции drawImage: drawImage(pic, 0, 0); // Рисуем изображение от точки с координатами 0, 0 drawImage(image, x, y, width, height) // параметры width, height меняют ширину и высоту изображения drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); // Первый параметр указывает то, какое изображение обрабатывать // sx, sy, sWidth, sHeight указывают параметры фрагмента на изображение-источнике // dx, dy, dWidth, dHeight ответственны за координаты отрисовки фрагмента на холсте Метод CLIP() Метод позволяет вырезать изображение по заранее созданной маске.
< html> < head> < canvas id=" myCanvas" width=" 800" height=" 700" > Треугольное изображение< /canvas> < script type='text/javascript'> // Контекст для работы var ctx = document.getElementById(" myCanvas" ).getContext(" 2d" ); var img1 = new Image(); img1.src = 'd: /MySite/forest.jpg'; function drawPoligon(){ //Создается маска ctx.beginPath(); ctx.moveTo(20, 20); ctx.lineTo(470, 470); ctx.lineTo(20, 470); ctx.closePath(); |
Последнее изменение этой страницы: 2017-03-14; Просмотров: 480; Нарушение авторского права страницы