У меня есть код, который загружает набор изображений в скрытые img элементы и затем цикл JavaScript, который помещает каждое изображение на холст. Однако я хочу отсечь каждое изображение так, чтобы это был круг при размещении в холст.
Мой цикл похож на это:
$$('#avatars img').each(function(avatar) {
var canvas = $('canvas');
var context = canvas.getContext('2d');
var x = Math.floor(Math.random() * canvas.width);
var y = Math.floor(Math.random() * canvas.height);
context.beginPath();
context.arc(x+24, y+24, 20, 0, Math.PI * 2, 1);
context.clip();
context.strokeStyle = "black";
context.drawImage(document.getElementById(avatar.id), x, y);
context.stroke();
});
Проблема, только первое изображение оттянуто (или видимо).
Если я удаляю логику отсечения:
$$('#avatars img').each(function(avatar) {
var canvas = $('canvas');
var context = canvas.getContext('2d');
var x = Math.floor(Math.random() * canvas.width);
var y = Math.floor(Math.random() * canvas.height);
context.drawImage(document.getElementById(avatar.id), x, y);
});
Затем все мои изображения оттянуты.
Существует ли способ получить каждое изображение, индивидуально отсеченное?
Я пытался сбросить область отсечения, чтобы быть всем холстом между изображениями, но это не работало.
Вы должны попытаться сохранить текущее состояние контекста, а затем восстановить его:
canvas = document.getElementById("area");
context = canvas.getContext('2d');
$("#avatars img").each(function(avatar) {
var x = Math.floor(Math.random() * canvas.width);
var y = Math.floor(Math.random() * canvas.height);
context.save();//push current state into canvas
context.beginPath();
context.arc(x + 24, y + 24, 20, 0, Math.PI * 2, 1);
context.clip();
context.strokeStyle = "black";
//draw image this way
var img = new Image();
img.src = avatar.src;
img.onload = function() {
context.drawImage(img, x, y);
};
context.stroke();
context.restore();//restore context to the state
});
Я думаю, когда вы вызываете метод drawImage, вам также необходимо установить параметр изображения как класс Image, добавив исходную строку, которая уже есть в вашем параметр avatar.src .
Вы должны проверить справочный документ для Canvas State