Можностей, предоставляемых веб-разработчикам



Pdf көрінісі
бет198/232
Дата06.01.2022
өлшемі5,47 Mb.
#12231
1   ...   194   195   196   197   198   199   200   201   ...   232
Байланысты:
[Bryus Louson, Remi SHarp] Izuchaem HTML5. Bibliot(z-lib.org)

З
АХВАТ ИЗОБРАЖЕНИЙ
Помимо рисования линий и форм, вы также можете копировать изображения — фотогра-
фии, видео и другие элементы холста — из других источников. Я уже демонстрировал, как 
использовать изображение в качестве источника для заливки 
createPattern
. Но можно 
и просто поместить изображение на холст. Или не просто, а кадрировав его или применив 
другие корректировки.
var ctx = document.getElementById('mycanvas').
getContext('2d'),
    img = new Image();
img.onload = function () {
    ctx.canvas.height = 500;
    ctx.canvas.width = 500;
    ctx.drawImage(this, 10, 10, 100, 100, 0, 0, 500, 500);
};
img.src = 'bruce-and-remy-promo-pics.jpg';
СОВЕТ
Все контексты рисования 2D включают обратную ссылку на элемент холста, на котором они 
рисуют объекты  Это означает, что вам не приходится передавать функциям две переменные, 
можно просто передать контекст и получить обратно ссылку на элемент холста, а затем поменять 
высоту, ширину или получить URL данных 




Достарыңызбен бөлісу:
1   ...   194   195   196   197   198   199   200   201   ...   232




©emirsaba.org 2024
әкімшілігінің қараңыз

    Басты бет