Повторно используемая функция для обрезки изображений в полигоны с помощью холста html5
Думаю, заголовок поста может нуждаться в редактировании, но пока я не знаю, где проблемы. Я читал страницы и ответы на подобные вопросы, здесь и в других местах. Один ответ на переполнение стека особенно близок, но я его не понимаю.
Мне нужна функция, чтобы рисовать полигоны на холсте в нужных координатах и заполнять их некоторым фоновым изображением, загруженным из файла (достаточно большим, чтобы не требовалось разбиение на листы). Треугольники подойдут для теста. По-видимому, я должен использовать drawImage и clip, и чтобы дать многоугольнику границу, я могу повторно использовать один и тот же путь для клипа и обводки. Также, видимо, я должен держать порядок
- define path
- save
- clip
- drawImage
- restore
- stroke.
Также прочитайте где-нибудь, что достаточно загрузить изображение один раз. (Если вы хотите, чтобы я цитировал источники для всех этих предположений, я буду искать, где я их видел. Большинство из них в Переполнении стека)
HTML-код пуст
<body onload = "main ();"></body>
Первый подход, делая вид, что браузер будет ждать загрузки картинки:
var ctx, img;
var image_path = 'bg.jpg';
function main () {
var CANVAS_SIZE = 600;
var view_field_cnv = document.createElement ('canvas');
view_field_cnv.width = CANVAS_SIZE;
view_field_cnv.height = CANVAS_SIZE;
view_field_cnv.style.border = "1px solid";
document.body.appendChild (view_field_cnv);
ctx = view_field_cnv.getContext ('2d');
img = document.createElement ('img');
img.src = image_path;
place_triangle (0, 0);
place_triangle (300, 300);
place_triangle (500, 500);
place_triangle (0, 0);
}
function place_triangle (x, y) {
console.log (x, y);
ctx.beginPath ();
ctx.moveTo (x + 10, y);
ctx.lineTo (x + 110, y);
ctx.lineTo (x + 60, y + 40);
ctx.closePath ();
img = document.createElement ('img');
img.src = image_path;
ctx.save ();
ctx.clip ();
ctx.drawImage (img, x, y);
ctx.restore ();
ctx.stroke ();
}
Это рисует все три треугольника, но без обрезанных изображений.
Вторая попытка с drawImage внутри image.onload:
var ctx;
var image_path = 'bg.jpg';
function main () {
var CANVAS_SIZE = 600;
var view_field_cnv = document.createElement ('canvas');
view_field_cnv.width = CANVAS_SIZE;
view_field_cnv.height = CANVAS_SIZE;
view_field_cnv.style.border = "1px solid";
document.body.appendChild (view_field_cnv);
ctx = view_field_cnv.getContext ('2d');
place_triangle (0, 0);
place_triangle (300, 300);
place_triangle (500, 500);
place_triangle (0, 0);
}
function place_triangle (x, y) {
console.log (x, y);
var img;
ctx.beginPath ();
ctx.moveTo (x + 10, y);
ctx.lineTo (x + 110, y);
ctx.lineTo (x + 60, y + 40);
ctx.closePath ();
img = document.createElement ('img');
img.src = image_path;
img.onload = function () {
ctx.save ();
ctx.clip ();
ctx.drawImage (img, x, y);
ctx.restore ();
ctx.stroke ();
}
}
Этот действительно рисует обрезанное изображение, но только один треугольник, последний. Просто комментирование сохранения и восстановления не помогает.
Итак, я не понимаю загрузку изображений, сохранение, восстановление и, возможно, миллион других вещей. Где будут ошибки?