HTML5 Canvas: градиенты и шаблоны

Последнее обновление 29 мая 2019 07:17:07 (UTC / GMT +8 часов)

script1adsense2code

script1adsense3code

Вступление

В HTML5 canvas вы можете заполнять или обводить фигуры и текст, используя методы stroke () или fill (). Когда мы рисуем текст или фигуры, он использует текущий стиль обводки или заливки. Стиль обводки или заливки может быть установлен на цвет, рисунок или градиент.

Градиенты

Градиенты состоят из непрерывно плавных цветовых переходов по вектору от одного цвета к другому, возможно, с последующими дополнительными переходами по тому же вектору к другим цветам. HTML5 canvas (2D) поддерживает два вида градиента: линейный и радиальный.

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

Линейный градиент определяет изменение цвета вдоль линии между двумя точками. Вы можете создать линейный градиент, вызвав метод createLinearGradient (). Вот синтаксис и параметры метода:

Синтаксис:

 var градиент = ctx .createLinearGradient (x0, y0, x1, y1);

параметры	Тип	Описание
x0	число	Координата x (в пикселях) начальной точки градиента.
y0	число	Y-координата (в пикселях) начальной точки градиента.
x1	число	Координата x (в пикселях) конечной точки градиента.
y1	число	Координата y (в пикселях) конечной точки градиента.

Следующим шагом в определении градиента является добавление как минимум двух цветовых остановок. Для этого используйте метод addColorStop (). Вот синтаксис и параметры метода:

Синтаксис:

 Gradient.addColorStop (смещение, цвет);

параметры	Тип	Описание
смещение	число	Значение с плавающей запятой между 0.0 и 1.0, которое представляет позицию, где 0 - начало градиента, а 1 - конец.
цвет	число	Цветная строка CSS для отображения в позиции, указанной параметром смещения.

Пример: линейный градиент HTML5 Canvas

Следующий веб-документ создает градиент:

Выход:

<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas - Linear gradient example</title>
</head>
<body>
<canvas id="demoCanvas" width="500" height="600"></canvas>
<script>
var canvas = document.getElementById("demoCanvas");  
if (canvas.getContext)   
{  
var ctx = canvas.getContext("2d");         
var gradient = ctx.createLinearGradient(10, 90, 200, 90);
gradient.addColorStop(0, 'black');
gradient.addColorStop(1, 'white');
ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 200, 250);             
}
</script>
</body> 
</html>

Пример: линейный градиент HTML5 Canvas с использованием значения цвета RGBa ()

Вы можете создать градиент, указав цветовую точку с помощью значения цвета RGBa (), которое включает в себя степени прозрачности. В следующем примере рисуются четыре прямоугольника, каждый с градиентом, идущим в другом направлении, и все переходят от красного до 50% прозрачного синего цвета.

Выход :

Код:

<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas - Linear gradinet example</title>
</head>
<body>
<canvas id="demoCanvas" width="500" height="600"></canvas>
<script>
var canvas = document.getElementById("demoCanvas");  
if (canvas.getContext)   
{  
var ctx = canvas.getContext("2d");         
var gradient1 = ctx.createLinearGradient(0, 0, 50, 0);
gradient1.addColorStop(0, 'red');
gradient1.addColorStop(1, 'rgba(0, 0, 255, 0.5)');
ctx.fillStyle = gradient1;
ctx.fillRect(0, 0, 75, 75);
    
var gradient2 = ctx.createLinearGradient(0, 0, 0, 50);
gradient2.addColorStop(0, 'red');
gradient2.addColorStop(1, 'rgba(0, 0, 255, 0.5)');
ctx.fillStyle = gradient2;
ctx.fillRect(75, 0, 75, 75);
 
var gradient3 = ctx.createLinearGradient(150, 0, 200, 50);
gradient3.addColorStop(0, 'red');
gradient3.addColorStop(1, 'rgba(0, 0, 255, 0.5)');
ctx.fillStyle = gradient3;
ctx.fillRect(150, 0, 75, 75);
    
var gradient3 = ctx.createLinearGradient(275, 50, 225, 0);
gradient3.addColorStop(0, 'red');
gradient3.addColorStop(1, 'rgba(0, 0, 255, 0.5)');
ctx.fillStyle = gradient3;
ctx.fillRect(225, 0, 75, 75);          
}
</script>
</body> 
</html>

Пример: HTML5 Холст Радужный градиент

В следующем примере создается градиент радуги с семью цветами, каждый цвет имеет 1/6 расстояния вдоль градиента.

Выход :

Код:

<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas - Rainbow Gradient</title>
</head>
<body>
<canvas id="demoCanvas" width="500" height="600"></canvas>
<script>
var canvas = document.getElementById("demoCanvas");  
if (canvas.getContext)   
{  
var ctx = canvas.getContext("2d");         
var gradient = ctx.createLinearGradient(10, 0, 500, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1 / 6, 'orange');
gradient.addColorStop(2 / 6, 'yellow');
gradient.addColorStop(3 / 6, 'green');
gradient.addColorStop(4 / 6, 'blue');
gradient.addColorStop(5 / 6, 'indigo');
gradient.addColorStop(1, 'violet');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 500, 75);
}
</script>
</body> 
</html>

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

Радиальный градиент определяет изменение цвета вдоль конуса (трехмерной геометрической формы) между двумя кругами. Вы можете создать радиальный градиент, вызвав метод createRadialGradient () и передав его в два круга, а также указав радиус круга источника и пункта назначения.

Синтаксис:

 var градиент = ctx .createRadialGradient (x0, y0, r0, x1, y1, r1)

параметры	Тип	Описание
x0	число	Координата x (в пикселях) начальной окружности градиента.
y0	число	Координата y (в пикселях) начальной окружности градиента.
rad0	число	Радиус начального круга.
x1	число	Координата x (в пикселях) конечного круга градиента.
y1	число	Координата y (в пикселях) конечного круга градиента.
RAD1	число	Радиус конечного круга.

Следующим шагом является добавление как минимум двух цветовых остановок. Для этого используйте метод addColorStop ().

Пример -1: Радиальный градиент HTML5 Canvas

Следующий веб-документ определяет радиальный градиент и использует его для заполнения круга.

Выход:

Код:

<!DOCTYPE html>
<html>
<head>
<title>Example : HTML5 Canvas Radial gradient example1 </title>
</head>
<body>
<canvas id="demoCanvas" width="500" height="600"></canvas>
<script>
var canvas = document.getElementById("demoCanvas");  
if (canvas.getContext)   
{  
var ctx = canvas.getContext("2d");
var gradient = ctx.createRadialGradient(85, 88, 5, 88, 90, 69);
gradient.addColorStop(0, 'white');           
gradient.addColorStop(1, 'black');
ctx.fillStyle = gradient;
ctx.arc(90, 90, 60, 0, 2 * Math.PI);
ctx.fill();   
}
</script>
</body> 
</html>

Пример -2: HTML5 Холст Радиальный градиент

В следующем веб-документе мы определили два разных градиента. Так как мы можем контролировать начальную и конечную точки градиента, мы можем создавать более сложные эффекты. Здесь мы немного сместили начальную точку от конечной точки, чтобы получить сферический трехмерный эффект.

Выход:

Код:

<!DOCTYPE html>
<html>
<head>
<title>Example : HTML5 Canvas Radial gradient example2 </title>
</head>
<body>
<canvas id="demoCanvas" width="500" height="600"></canvas>
<script>
var canvas = document.getElementById("demoCanvas");  
if (canvas.getContext)   
{  
  var ctx = canvas.getContext("2d");
  // Create gradients
  var g1 = ctx.createRadialGradient(45,45,10,52,50,30);
  g1.addColorStop(0, '#A7D30C');
  g1.addColorStop(0.9, '#019F62');
  g1.addColorStop(1, 'rgba(1,159,98,0)');
  var g2 = ctx.createRadialGradient(125,45,20,132,50,30);
  g2.addColorStop(0, '#FF5F98');
  g2.addColorStop(0.75, '#FF0188');
  g2.addColorStop(1, 'rgba(255,1,136,0)');
 // draw shapes
 ctx.fillStyle = g1;
 ctx.fillRect(0,0,150,150);
 ctx.fillStyle = g2;
 ctx.fillRect(100,0,170,150);
}
</script>
</body> 
</html>

Узоры

Шаблон используется для заливки или обводки объекта с использованием предварительно определенного графического объекта, который может быть воспроизведен («выложен плиткой») с фиксированными интервалами в x и y, чтобы покрыть области, которые будут окрашены. Шаблон состоит из источника изображения, такого как JPG, GIF, PNG, SVG или воспроизводимый в данный момент кадр видео, и настройки повторения для создания шаблона из фрагментов изображения.

Вы создаете шаблон, используя метод контекста createPattern (), передавая объект изображения и параметр «repeat».

Синтаксис:

 var pattern = ctx .createPattern (изображение, повторение);

параметры	Тип	Описание
образ	объект	Элемент изображения, холста или видео в шаблоне для использования.
репетиция	число	Направление повторения. Строка «repeat» повторяет изображение как по горизонтали, так и по вертикали, но вы можете указать одно из следующих значений: repeat: рисунок повторяется в горизонтальном и вертикальном направлениях. repeat-x: рисунок повторяется только в горизонтальном направлении. repeat-y: паттерн повторяется только в вертикальном направлении. no-repeat: шаблон печатается только один раз и не повторяется.

Пример -1: шаблоны HTML5 Canvas

Следующий пример загружает два изображения - pattern1.png и pattern2.png и превращает их в шаблоны, каждый из которых используется для обводки линии и заполнения прямоугольника.

Выход:

Код:

<!DOCTYPE html>
<html>
<head>
<title>Example : HTML5 Canvas Pattern example </title>
</head>
<body>
<canvas id="demoCanvas" width="500" height="600"></canvas>
<script>
var canvas = document.getElementById("demoCanvas");  
if (canvas.getContext)   
{  
var ctx = canvas.getContext("2d");
// create new image object to use as pattern
var image1 = new Image();
var image2 = new Image();
image1.src ='http://kodesource.top/html5-canvas/images/pattern1.png';
image2.src ='http://kodesource.top/html5-canvas/images/pattern3.png';
var pat1 = ctx.createPattern(image1, "repeat");
var pat2 = ctx.createPattern(image2, "repeat");
 ctx.lineWidth = 4;
// stroke line and fill rect with block pattern
ctx.beginPath();
ctx.moveTo(50, 10);
ctx.lineTo(150, 10);
ctx.strokeStyle = pat1;
ctx.stroke();
ctx.fillStyle = pat1;
ctx.fillRect(50, 20, 100, 150);
 
// stroke line and fill rect with cork pattern
ctx.beginPath();
ctx.moveTo(200, 10);
ctx.lineTo(300, 10);
ctx.strokeStyle = pat2;
ctx.stroke();
ctx.fillStyle = pat2;
ctx.fillRect(200, 20, 100, 150);
}
</script>
</body> 
</html>

Редактор кода:

См. Общий редактор Pen html css от w3resource ( @ w3resource ) в CodePen .

Предыдущая: HTML5 Canvas Rectangle
Далее: HTML5 Canvas Text