javascript - 在另一个图像上生成一个图像并给出坐标

Question

我有一些图像坐标，我想用它们在带有 javascript 的图像上放置一个小图像。这可以用 javascript 来完成吗？或者我需要创建 div 并修改它的 css 属性？顺便说一句:图像可以放置在页面上的任何位置。

Answer 1

这是一个完整的工作代码:Live Demo

CSS

.overlays{
    position:absolute;
}

JS

function showImage() {
    // myImage : ID of image on which to place new image

    var image = document.getElementById('myImage');

    console.log(image.width);

    margin = 20;

    l = image.offsetLeft;
    t = image.offsetTop;
    w = image.width;
    h = image.height;

    // Location inside the image
    offX = parseInt(Math.random() * w);
    offY = parseInt(Math.random() * h);

    if(offX > margin) offX -= margin;
    if(offY > margin) offY -= margin;

    l += offX;
    t += offY;

    var newImage = document.createElement("img");
    newImage.setAttribute('src', '1.jpg');
    newImage.setAttribute('class', 'overlays');
    newImage.style.left = l + "px";
    newImage.style.top = t + "px";
    document.body.appendChild(newImage);
}