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



Pdf көрінісі
бет191/232
Дата06.01.2022
өлшемі5,47 Mb.
#12231
1   ...   187   188   189   190   191   192   193   194   ...   232
Байланысты:
[Bryus Louson, Remi SHarp] Izuchaem HTML5. Bibliot(z-lib.org)

Рис . 5 .6 .
 Вертикальный градиент 
Рис . 5 .7 .
 Начальная и конечная точки радиального 
на элементе холста 
градиента совпадают, но конечный радиус намного 
 
больше, благодаря чему создается гладкий рисунок 
 
в форме круга


168  •  Глава 5
С узорами еще проще. Вам нужен только источник; элемент источника передается методу 
createPattern
, а результат используется в методе 
fillStyle
. Помнить нужно только о том, 
что для правильного захвата изображений и видео элемент источника должен сначала 
полностью загрузиться.
Чтобы создать эффект, показанный на рис. 5.8 (копии изображений, уложенные плиткой 
по всей площади холста), сначала растяните холст по размеру окна. Затем динамически 
создайте изображение и, когда сработает событие загрузки, примените изображение в ка-
честве источника повторяющегося узора:
var canvas = document.querySelector('canvas'),
    img = document.createElement('img'),
    ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
img.onload = function () {
    ctx.fillStyle = ctx.createPattern(this, 'repeat');
    ctx.fillRect(0, 0, canvas.width, canvas.height);
};
img.src = 'remysharp_avatar.jpg';
Рис . 5 .8 .
 Укладываем изображение на холсте с помощью метода createPattern


Достарыңызбен бөлісу:
1   ...   187   188   189   190   191   192   193   194   ...   232




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

    Басты бет