Canvas Gradients

Градиент, как правило, представляет собой цветовую схему, плавно переходящую от одного цвета к другому. Градиенты в HTML5 Canvas используются для заливки кругов, прямоугольников, линий, текста и т. д., при этом фигуры на холсте не ограничиваются сплошными цветами.

Существует два типа градиентов:

createLinearGradient(x,y,x1,y1) — для создания линейного градиента
createRadialGradient(x,y,r,x1,y1,r1) — для создания радиального градиента

Получив объект градиента, добавьте два или более цветовых перехода. Для задания цветовых переходов и их положения вдоль градиента используется метод addColorStop(). Позиции градиента могут находиться в диапазоне от 0 до 1.

Затем установите свойство fillStyle или strokeStyle равным градиенту и нарисуйте фигуру.

Линейный градиент

Линейный градиент изменяет цвет по линейному шаблону, определяя направление градиента (горизонтальное, вертикальное или диагональное). Четыре параметра этой функции (x,y,x1,y1) определяют направление и протяжённость градиента. Примечание: координаты Canvas начинаются с (0,0) в левом верхнем углу, при этом x увеличивается вправо, а y — вниз.

Пример линейного градиента с использованием fillStyle:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      canvas {
        border: 1px solid #cccccc;
      }
    </style>
  </head>
  <body>
    <canvas id="exampleCanvas" width="300" height="150">
      Your browser doesn't support the HTML5 canvas tag.
    </canvas>
    <script>
      var c = document.getElementById("exampleCanvas");
      var ctx = c.getContext("2d");
      var grd = ctx.createLinearGradient(0, 0, 300, 0);
      grd.addColorStop(0, "green");
      grd.addColorStop(1, "whitesmoke");
      ctx.fillStyle = grd;
      ctx.fillRect(20, 20, 260, 110);
    </script>
  </body>
</html>

Попробуйте сами »

Пример линейного градиента с использованием fillStyle с разными цветами:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      canvas {
        border: 2px solid #202131;
      }
    </style>
  </head>
  <body>
    <canvas id="exampleCanvas" width="500" height="200"></canvas>
    <script>
      var canvas = document.getElementById('exampleCanvas');
      var context = canvas.getContext('2d');
      context.rect(0, 0, 500, 200);
      var linear = context.createLinearGradient(0, 0, 500, 200);
      linear.addColorStop(0, '#297979');
      linear.addColorStop(1, '#2ee035');
      context.fillStyle = linear;
      context.fill();
    </script>
  </body>
</html>

Попробуйте сами »

Пример линейного градиента с использованием fillStyle и strokeStyle:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      canvas {
        border: 5px solid #cccccc;
      }
    </style>
    <script>
      function drawShape() {
        var canvas = document.getElementById('canvasGradient');
        if (canvas.getContext) {
          var ctx = canvas.getContext('2d');
          var lgrad1 = ctx.createLinearGradient(0, 0, 0, 300);
          lgrad1.addColorStop(0, 'blue');
          lgrad1.addColorStop(0.4, 'lightpink');
          lgrad1.addColorStop(0.5, 'purple');
          lgrad1.addColorStop(1, 'lightsalmon');
          var lgrad2 = ctx.createLinearGradient(0, 50, 0, 150);
          lgrad2.addColorStop(0, '#7afff3');
          lgrad2.addColorStop(0.5, '#191918');
          lgrad2.addColorStop(1, '#7afff3');
          ctx.fillStyle = lgrad1;
          ctx.strokeStyle = lgrad2;
          ctx.fillRect(15, 15, 120, 120);
          ctx.strokeRect(100, 50, 100, 50);
        } else {
          alert('Your browser does not support');
        }
      }
    </script>
  </head>
  <body onload="drawShape();">
    <canvas id="canvasGradient" width="300" height="300"></canvas>
  </body>
</html>

Попробуйте сами »

Радиальный градиент

Радиальный градиент изменяет цвет по круговой схеме. Он может быть создан с помощью двух заданных окружностей. Иными словами, радиальный градиент — это цветовая схема, расширяющаяся по кругу от внутреннего цвета к одному или нескольким другим. Это реализуется с помощью двух окружностей, каждая из которых должна иметь центральную точку и радиус.

Пример радиального градиента:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      canvas {
        border: 2px solid #cccccc;
      }
    </style>
  </head>
  <body>
    <canvas id="exampleCanvas" width="300" height="150">
      Your browser doesn't support the HTML5 canvas tag.
    </canvas>
    <script>
      var c = document.getElementById("exampleCanvas");
      var ctx = c.getContext("2d");
      var grd = ctx.createRadialGradient(155, 80, 20, 130, 40, 190);
      grd.addColorStop(0, "#14389c");
      grd.addColorStop(1, "white");
      ctx.fillStyle = grd;
      ctx.fillRect(15, 15, 270, 120);
    </script>
  </body>
</html>

Попробуйте сами »

Практика

Какие из этих методов используются для применения цветов, узоров и градиентов к фигурам на холсте HTML5?