Блог

В настоящее время я настроил холст и пытаюсь добавить в него несколько изображений.

Таким образом, только когда я нажимаю на холст, в том месте, где я щелкнул на холсте, появляются небольшие изображения.

Кто-нибудь может мне помочь?

Первое, что нужно иметь в виду, это то, что вам нужно будет фиксировать координаты относительно canvas, а не всей страницы, что именно вы получите из события onclick. Это довольно легко перевести с помощью такого кода, как этот:

 var onMouseClick = function(evt){
    var x, y;
    var point = findOffset(e.target);
    x = e.pageX - point.x;
    y = e.pageY - point.y;

    return {x,y};
}


var findOffset = function(element) {
    var left = 0;
    var top = 0;
    if (element.offsetParent) {
        do {
            top  = element.offsetTop;
            left  = element.offsetLeft;
        } while(element = element.offsetParent);
        return {
            x : left,
            y : top
        };
    }
};
  

Где ваш обратный вызов OnMouseClick возвращает объект с позицией x, y, в которой произошел щелчок в самом вашем холсте.

Далее вы захотите вставить свое изображение в этот момент. То, как вы это сделаете, будет в некоторой степени зависеть от того, где находится ваш источник изображения, но в основном это будет выглядеть так:

 var canvasCtx = document.getElementById("myCanvasElement").getContext('2d');
var img = document.getElementById("id-of-an-img-tag-in-your-DOM");
canvasCtx.drawImage(img,x,y);
  

Если вы хотите загрузить свое изображение откуда-то помимо DOM, вы можете создать объект image самостоятельно следующим образом:

 var img = new Image();
img.onload = function(){
    canvasCtx.drawImage(img,x,y);
};

img.src = "url/to/your/image.jpg";
  

Это приведет к тому, что ваше изображение будет загружено с URL-адреса при щелчке мыши, а затем, как только изображение завершит загрузку, добавит его на ваш холст.