Javascript 如何允许用户在html中将图像放在另一个图像的顶部？

我想要一个汽车的图像，当用户点击汽车上的某个点时，我会在该点上放置一个x图像或一个圆圈图像。我需要保存他们单击的位置，这样当他们回来时，我会将其显示在同一位置

在html中实现这一点的最佳方法是什么

我应该使用一个图像与其他图像叠加在它上面吗

我应该使用html5吗

有人知道类似性质的工作示例吗

---

希望使用js、html5等在iphone safari（而非本机应用程序）上实现这一点。应用程序是ruby on rails，因此我可以利用一些服务器端功能，但如果可能的话，我更愿意尽可能多地利用html/css。

好的，你可以为每个点创建新图像，当用户单击时，你可以用新图像替换原始图像。您可以使用CSS或jQuery来实现这一点）

根据您是否对显示区域或精确的x/y坐标感兴趣，可以使用图像

还可以查看stackoverflow问题

我没有可供展示的工作示例，但我认为这在本质上是相似的。我不知道你会如何保存这些信息以便回忆状态（在同一个会话或几天/几个月后返回？）

---

我希望这是有用的。

您可以使用

画布

元素来完成此操作。

canvas

元素允许您在其中绘制图像和形状

要存储和检索单击，可以使用Web存储（

localStorage

）

例如-加载图像并将其绘制到画布：

HTML：

<canvas id="demo" width="500" height="400"></canvas>

/// get context for canvas, cache dimension
var ctx = demo.getContext('2d'),
    w = demo.width,
    h = demo.height,

    img = new Image(); /// the image we want to load

/// when done go draw existing marks and start listening for clicks
img.onload = function() {

    renderMarks();

    demo.onclick = function(e) {

        /// convert mouse coord relative to canvas
        var rect = demo.getBoundingClientRect(),
            x = e.clientX - rect.left,
            y = e.clientY - rect.top;

        /// store mark
        addMark(x, y);

        /// redraw everything
        renderMarks();
    }
}

这些是主要功能，首先将现有标记渲染到图像顶部的画布上：

function renderMarks() {

    /// re-draw image which also serves to clear canvas    
    ctx.drawImage(img, 0, 0, w, h);

    /// get existing marks from localStorage
    var marks = localStorage.getItem('marks'),
        i = 0;

    /// if any, render them all
    if (marks !== null) {

        /// localStorage can only store strings 
        marks = JSON.parse(marks);

        /// set color and line width of circle
        ctx.strokeStyle = '#f00';
        ctx.lineWidth = 3;

        /// iterate marks and draw each one
        for(;i < marks.length; i++) {
            ctx.beginPath();
            ctx.arc(marks[i][0], marks[i][1], 30, 0, 2 * Math.PI);
            ctx.stroke();
        }
    }
}

（代码可以通过各种方式进行优化，但我这样做是为了展示基本原理）

如果您现在离开该页面并返回，您将看到标记再次呈现（免责声明：jsfiddle可能会或可能不会提供相同的页面，因此请在本地/在“真实”页面中进行测试）

这里的圆圈可以是任何东西，一个图像，一个不同的形状等等

要清除标记，只需调用：

localStorage.clear();

或者，如果您还存储了其他数据：

localStorage.removeItem('marks');

---

您是否仅限于javascript、html和css等客户端技术？是的，将进行编辑以澄清，谢谢，目标是在safari for iphone上以html5、js和iui（或其他类似技术）作为起点来实现这一点：我不明白为什么当我问一个好问题并得到一个好答案时，你们会结束这个问题，这太傻了！在我所有的问题中，你提出的另一个问题的观点最多！太棒了，正是我想要的！

localStorage.removeItem('marks');