Canvas - Как заполнить квадрат двумя цветами, используя createLinearGradient ()?
Взглянув на API , это исключение вызывается, если компонент не отображается. В этом случае это Canvas.peer равно null. Взгляд на поле peer показывает, что
Параметр устанавливается, когда
blockquote>Componentдобавляется в контейнер, который также является равноправным узлом] Поскольку вы запускаете поток обновлений из конструктора вашего компонента,
renderможно вызвать до того, как ваш компонент будет добавлен в другой контейнер, что означает, чтоpeer-null, а затем будет выбраноIllegalStateException.
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>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>Чтобы исправить это, у вас есть два варианта:
- Установите параметры градиента правильно с самого начала:
<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>