Question

我有以下代码，使用JavaScript库，我可以在第一个画布中绘制然后合并到第二个画布。

问题是，如何将第一个画布设置为静态或浮动，无论我在哪里滚动第二个画布。

#container {
  position: relative;
  border: 1px solid black;
  overflow: auto;
  width:400px;
  height:200px;
}
#canvas1 {
  position: absolute;
  left: 0;
  top: 0;
  border: 3px solid green;
  width:100%;
  height:100%;
}
#canvas2 {
  position: absolute;
  left: 0;
  top: 0;
  border: 2px solid red;
}

<div id="container">
  <canvas id="canvas1"></canvas>
  <canvas id="canvas2" height="1200" width="800"></canvas>
</div>

https://jsfiddle.net/wz2g8hwz/

Answer 1

只需在＃canvas2上添加width:100%和height:100%即可。

喜欢这个。

#canvas2 {
    position: absolute;
    left: 0;
    top: 0;
    border: 2px solid red;
    width: 100%;
    height: 100%;
}

Answer 2

现在你正在滚动包含两个画布的元素 - 所以它们都会移动。因此，将第二个画布放入其自己的容器元素中，并为其设置溢出，以便只移动该容器（仅为第二个画布）的内容。

新容器元素的定位方式与第二个画布之前的位置（绝对值）相同，然后该画布本身不再是绝对的。

在下面的例子中，我用图像替换了空的画布，因此效果变得可见。（遗憾的是，来自占位服务的图像似乎不再通过HTTPS工作了，昨天工作正常。但我认为你有了一般的想法。）https://jsfiddle.net/wz2g8hwz/4/

＆＃13;

#container {
  position: relative;
  border: 1px solid black;
  width: 400px;
  height: 200px;
}

#canvas1 {
  position: absolute;
  left: 0;
  top: 0;
  border: 3px solid green;
  width: 100%;
  height: 100%;
}

#innerContainer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  border: 2px solid red;
}

#canvas2 {
  opacity: .5;
  width: 1200px;
  height: 800px;
}

＆＃13;

<div id="container">
  <img id="canvas1" src="//via.placeholder.com/400x200">
  <div id="innerContainer">
    <img id="canvas2" src="//via.placeholder.com/1200x800">
  </div>
</div>

＆＃13;

在画布上叠加画布

2 个答案: