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



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

С
АМОЕ ГЛАВНОЕ О ХОЛСТЕ
«Hello world» любого эксперимента с холстом — это добавление элемента 

 на 
страницу. По умолчанию холст невидим, а его размер — 300 пикселов в ширину и 150 пик-
селов в высоту.
canvas hello world

Теперь, когда элемент холста на экране, чтобы начать рисовать в контексте 2D, нам пона-
добится JavaScript:
var ctx = document.querySelector('canvas').
¬ getContext('2d');
Добавив контекст, мы получили доступ ко всей функциональности API и можем рисовать 
в свое удовольствие. Добавьте на холст простую фигуру (рис. 5.4):
ctx.fillRect(10, 20, 50, 50);
fillRect
 принимает четыре аргумента: координаты 
x
 и 
y
, высоту и ширину. Координаты 
x
 
и 
y
 отсчитываются от верхнего левого угла прямоугольника. Как показано на рис. 5.4, цвет 
фигуры по умолчанию — черный. Давайте добавим цвет и нарисуем вокруг прямоуголь-
ника контур, чтобы получить холст, как на рис. 5.5:
ctx.fillStyle = 'rgb(0, 255, 0)';
ctx.fillRect(10, 20, 50, 50); // залитый прямоугольник
ctx.strokeStyle = 'rgb(0, 182, 0)';
ctx.lineWidth = 5;
ctx.strokeRect(9, 19, 52, 52); // обводка
 

жүктеу/скачать 5,47 Mb.

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



©emirsaba.org 2024
әкімшілігінің қараңыз
    Басты бет
Lessons
Curriculum vitae
Documents