Учебник HTML5: холст рисует графику градиента линейного градиента

Введение в статью Wulin.com (www.vevb.com): применение ежедневного обучающего тега HTML5 - чертеж графики линейного градиента.

До сих пор было введено базовые знания рисования графики с использованием холста. Начиная с этого раздела, мы представим одно из других более продвинутых знаний о рисовании - линейный градиент. Во -первых, давайте рассмотрим цветной заполнение, указанную в «HTML5 Daily Practice: применение тегов холста - рисование прямоугольников». При рисовании линейного градиента нам необходимо использовать новый объект - объект LinearGradient и использовать метод CreateLineArGraduiend объекта контекста графика для создания объекта. Определение этого метода заключается в следующем:

context.createlineargradient (xstart, ystart, xend, yend);

xstart: горизонтальная ось начальной точки градиента

Ystart: вертикальная координата начальной точки градиента

xend: градиентная конечная точка горизонтальная ось

Йенд: вертикальная координата конечной точки градиента

Используя этот метод, создается объект линеаргрейтера, использующий две точки координат. Итак, как следует установить градиент?

После того, как мы передаем объект LinearGradient, мы используем метод AddColorStop для его установки. Пример этого метода заключается в следующем:

context.addcolorstop (смещение, цвет);

Используйте этот метод, чтобы добавить цвет градиента, который имеет два параметра:

Смещение: это смещение номера плавающей точки от 0-1 цвета, оставляя начальную точку градиента, что устанавливает цвет в смещение с начальной точки градиента.

Цвет: цвет используется для установки чертежа

Иллюстрация параметра смещения в методе AddColorStop