Canvas - Как заполнить квадрат двумя цветами, используя createLinearGradient ()?

Question

У меня проблемы с созданием квадрата с двумя цветами.Я нашел функции createLinearGradient и addColorStop, но он заполняет квадрат только одним цветом - синим.

Как именно я правильно заполнил этот квадрат?Кажется, у меня проблемы с пониманием параметров функции.

var c = canvas.getContext('2d'); // context object

var grad = c.createLinearGradient(0, 0, 0, 100);

grad.addColorStop(0, "red");     //
grad.addColorStop(1, "blue");   //

// Fill a square:
c.fillStyle = grad;
c.fillRect(100, 100, 100, 100);

Answer 1

fillStyles, такие как градиенты и шаблоны, рисуются относительно матрицы контекста, поэтому ваш градиент фактически рисуется над прямоугольником:

var c = canvas.getContext('2d'); // context object
var grad = c.createLinearGradient(0, 0, 0, 100);

grad.addColorStop(0, "red");     //
grad.addColorStop(1, "blue");   //

c.fillStyle = grad;
// show the whole gradient
c.fillRect(0, 0, canvas.width, canvas.height);
// OP's square
c.strokeRect(100, 100, 100, 100);

<canvas id="canvas" height="300"></canvas>

Чтобы исправить это, у вас есть два варианта:

• Установите параметры градиента правильно с самого начала:

var c = canvas.getContext('2d');
// move the y1 and y2 values by 100
var grad = c.createLinearGradient(0, 100, 0, 200);

grad.addColorStop(0, "red");     //
grad.addColorStop(1, "blue");   //

// Fill a square:
c.fillStyle = grad;
c.fillRect(100, 100, 100, 100);

<canvas id="canvas" height="300"></canvas>

• Переведите матрицу вашего контекста непосредственно перед вызовом fill(). Действительно, рисование и заполнение пути может быть выполнено на отдельной матрице.

var c = canvas.getContext('2d');
var grad = c.createLinearGradient(0, 0, 0, 100);

grad.addColorStop(0, "red");     //
grad.addColorStop(1, "blue");   //

c.fillStyle = grad;
// draw the path
c.rect(100, 100, 100, 100);
// change the filling matrix
c.translate(100, 100);
c.fill();

// reset the matrix
c.setTransform(1,0,0,1,0,0);

<canvas id="canvas" height="300"></canvas>

Answer 2

Ваши значения для createLinearGradient были за пределами прямоугольника, в котором вы рисовали.

const canvas = document.getElementById('one');
const c = canvas.getContext('2d');
const grad = c.createLinearGradient(100, 100, 200, 200);
grad.addColorStop(0, "red");
grad.addColorStop(1, "blue");

c.fillStyle = grad;
c.fillRect(100, 100, 100, 100);

canvas {
  outline: 1px solid black
}

<canvas id="one" width="300" height="300"></canvas>