Как поместить фигуру за фигурой
Могли бы вы напомнить мне, каким образом можно поставить одну фигуру за вторую фигуру при помощи canvas? Например сделать так, чтобы круг находился за квадратом(квадрат был поверх круга). Искал в интернете, ничего полезного не нашел.
Спаcибо за помощь.
Ответы (1 шт):
Автор решения: Monkey Mutant
→ Ссылка
В canvas работает z-index по типу "то что нарисовано выше то расположено ниже"
Если сомнваетесь то переместите ctx.fillStyle = 'red'; ctx.fillRect(25, 25, 100, 100); выше кода circle
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = 70;
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
ctx.fillStyle = 'green';
ctx.fill();
ctx.closePath();
ctx.fillStyle = 'red';
ctx.fillRect(25, 25, 100, 100);<canvas id="canvas"></canvas>Такой же вариант но квадрат за кругом
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(25, 25, 100, 100);
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = 70;
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
ctx.fillStyle = 'green';
ctx.fill();
ctx.closePath();<canvas id="canvas"></canvas>