Второй вариант использования fillStyle — градиентная заливка. Цвета градиента делятся на цвета линейного градиента и цвета радиального градиента.
Линейный градиент: здесь будут использоваться две новые функции холста.
Шаг 1. Используйте новую функцию createLinearGradient(xstart,ystart,xend,yend);var linearGrad = context.createLinearGradient(xstart,ystart,xend,yend);
Он имеет четыре параметра. Это соответственно xstart, ystart, xend и yend, которые образуют две координаты, и эти две координаты образуют отрезок линии. Этот сегмент линии на самом деле является линией градиента. Градиентные линии используются для определения направления и масштаба градиента.
Второй шаг: добавьте colorStop на основе этой линии градиента. Этот метод называется addColorStop(stop, color). Он имеет два параметра: стоп и цвет. Первый параметр — это значение с плавающей запятой, используемое для определения положения ключевого цвета. Второй параметр используется для определения цвета ключевого цвета. линейныйГрад.addColorStop(стоп,цвет);
После выполнения этих двух шагов переменную LinearGrad можно передать в этот атрибут как fillStyle.
Посмотрите на код:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, Initial-scale=1.0> <meta http-equiv=X-UA -Compatible content=ie=edge> <title>Линейный градиент</title></head><body> <canvas id=canvas style=border: 1px сплошной #aaa;display:block;margin:0 auto></canvas></body></html><script> window.onload = function () { var Canvas = document.getElementById(canvas.width = 800); ; Canvas.height = 600; if (canvas.getContext(2d)) { var context = Canvas.getContext(2d); //Получаем среду рисования контекста var linearGrad = context.createLinearGradient(0, 0, 800, 600); //Начальная координата линии градиента — (0,0), а конечная координата — (800,600) linearGrad.addColorStop(0.0, '#000'); // Первый параметр представляет положение ключевого цвета. 0 представляет начальную позицию, 1 представляет конечную позицию, а второй параметр представляет цвет ключевого цвета. LinearGrad.addColorStop(1.0, '#fff'); context.fillStyle = linearGrad; context.fillRect(0, 0, 800, 600 } else { alert('Ваш браузер не поддерживает холст, попробуйте сменить браузер ~ ') } </script>Рендеринг:
После того, как мы создадим переменную LinearGrad, мы можем добавить ColorStop и добавить много других.
Например:
Код:
var linearGrad = context.createLinearGradient(0, 0, 800, 600); //Начальная координата линии градиента — (0,0), а конечная координата — (800,600) LinearGrad.addColorStop(0.0, '#fff') ; линейныйГрад.addColorStop(0.25, '#FB3'); '#690'); LinearGrad.addColorStop(0.75, '#09C'); LinearGrad.addColorStop(1.0, '#000');
Рендеринг:
Кроме того, определенная нами линия градиента наклонена, и мы также можем определить ее как горизонтальную или вертикальную. Нам нужно только изменить конечные координаты линии градиента. Посмотрите на код создания горизонтального градиента:
вар LinearGrad = context.createLinearGradient(0, 0, 800, 0);
Рендеринг:
Цвет вертикального градиента:
вар LinearGrad = context.createLinearGradient(0, 0, 800, 0);
Рендеринг:
Независимо от того, наклонена ли она по горизонтали или по вертикали, то, что мы делаем, проходит через весь холст. Итак, каков будет эффект, если наша линия градиента будет назначена только части холста? Давайте изменим его
вар LinearGrad = context.createLinearGradient(0, 0, 400, 300);
Рендеринг:
Точно так же линия градиента, которую мы создаем, также может превышать максимальную ширину и высоту этого холста. Давайте изменим его
var LinearGrad = context.createLinearGradient(-200, -100, 1000, 800);
Рендеринг:
Кроме того, нарисованные нами заполненные фигуры не обязательно могут занимать весь холст. Мы можем произвольно настроить форму, которую определяем. Эта заполненная фигура найдет подходящий цвет заливки на определенной нами линии градиента и заполнит ее. Например:
var LinearGrad = context.createLinearGradient(-200, -100, 1000, 800);
Рендеринг:
Радиальный градиент. Отличие от линейного градиента заключается в том, что радиальный градиент определяет радиальный градиент. Этот радиальный градиент определяется на основе двух концентрических окружностей. В отличие от линейного градиента, который определяется между двумя точками.
Радиальные градиенты также требуют двух шагов.
Шаг 1: Используйте новую функцию createRadialGradient(x0,y0,r0,x1,y1,r1); у него 6 параметров. Первые три параметра определяют координаты и радиус первого кольца, а последние три параметра определяют координаты и радиус второго кольца. Весь радиальный градиент происходит между этими двумя кругами. var радиальныйGrad = context.createRadialGradient(x0,y0,r0,x1,y1,r1);
Шаг 2: Это то же самое, что и линейный градиент, поэтому я не буду описывать его подробно. радиальныйГрад.addColorStop(стоп,цвет);
Код очень похож на код для линейных градиентов. Просто здесь используется createRadialGradient. Мы передаем параметры createRadialGradient(300,300,0,300,300,500). Первые три параметра определяют точку с радиусом 0 в центре холста. Последние три параметра определяют большой круг радиусом 500 в центре холста. Это определяет радиальный градиент, исходящий наружу от точки. Взгляните на код
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, Initial-scale=1.0> <meta http-equiv=X-UA -Compatible content=ie=edge> <title>Радиальный градиент</title></head><body> <canvas id=canvas style=border: 1px сплошной #aaa;display:block;margin:0 auto></canvas></body></html><script> window.onload = function () { var Canvas = document.getElementById(canvas.width = 600); ; Canvas.height = 600; если (canvas.getContext(2d)) { var context = Canvas.getContext(2d); context.createRadialGradient(300, 300, 0, 300, 300, 500); radiusGrad.addColorStop(0.0, '#fff'); radiusGrad.addColorStop(0.25, '#FB3'); radiusGrad.addColorStop(0.5, '#690'); '); радиальныйGrad.addColorStop(0.75, '#09C'); radiusGrad.addColorStop(1.0, '#000'); context.fillStyle = radiusGrad; context.fillRect(0, 0, 600, 600 } else { alert('You); Ваш браузер не поддерживает Canvas, попробуйте сменить браузер~') } </script>Рендеринг:
Вы можете попробовать изменить параметры, чтобы увидеть, какие будут эффекты.
Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.