javascript - 在 html 中使用浏览器窗口调整图像大小和文本位置

Question

我正在为 Siemens PLC 开发一个网页，用于显示生产线上可能存在“交通堵塞”的位置。我的计划是将生产线的 .jpg 图像插入网页，然后将红色圆圈放在生产线的每台机器上。然后我会用 javascript 和 jquery 改变颜色。

我已经想通了，如何根据 PLC 变量使用 jquery 和 javascript 更改 css 圆圈的颜色。主要问题是，我希望我的生产线图像能够像本例中那样使用浏览器窗口调整大小:

jfiddle

 html, body {
      height: 100%;
      margin: 0;
      padding: 0;
    }

    img {
      padding: 0;
      display: block;
      margin: 0 auto;
      max-height: 100%;
      max-width: 100%;
    }

那么现在我的问题是，如何在图像上定位我的圆圈指示器，以便即使调整浏览器窗口大小时指示器也能保持其在图片上的位置？

Answer 1

您最好使用 svg 图像或 Canvas 来实现此成就。您可以使用 Javascript 轻松定位元素。