javascript - 当我重叠图像和 Canvas 时，我无法让它保持一致

Question

以前，我有一排 5 个 Canvas 元素，如下所示，每个元素的正下方显示了日期:

<div class="clock">

<div class="clockwrapper">
    <canvas id="piechart0" width="150" height="150"></canvas>
    <div class="date" id="day0"></div>
    <div class="date1" id="date0"></div>
</div>
<div class="clockwrapper">
    <canvas id="piechart1" width="150" height="150"></canvas>
    <div class="date" id="day1"></div>
    <div class="date1" id="date1"></div>
</div>
<div class="clockwrapper">
    <canvas id="piechart2" width="150" height="150"></canvas>
    <div class="date" id="day2"></div>
    <div class="date1" id="date2"></div>
</div>
<div class="clockwrapper">
    <canvas id="piechart3" width="150" height="150"></canvas>
    <div class="date" id="day3"></div>
    <div class="date1" id="date3"></div>
</div>
<div class="clockwrapper">
    <canvas id="piechart4" width="150" height="150"></canvas>
    <div class="date" id="day4"></div>
    <div class="date1" id="date4"></div>
</div>

现在我想在 Canvas 上添加一个稍微透明的图像，这样我在 Canvas 上绘制的任何内容都会显示出来。但是，当我将第一个 clockwrapper 更改为此时:

    <img src="images/clock2.jpg" id="imgclock1" width="150" height="150" class="analog"/>
    <canvas id="piechart0" width="150" height="150" style="position: relative; top: -150px; left: 0px; opacity: .5"></canvas>
    <div class="date" id="day0"></div>
    <div class="date1" id="date0"></div>

接下来的四个 Canvas 下降一行，我必须将 piechart0 的顶部样式更改为 -150px，以便它们可以重叠。这是每个类的样式:

canvas {
    padding-top: 0px;
    display: inline;
    margin-left: auto;
    margin-right: auto;
    left: 25%
}
.date {
    display: inline;
    padding-left: 0px;
    color: white;
    margin-left: 120px;
    font-weight: bold;
    text-align: center;
}
.date1 {
    display: inline;
    padding-left: 10px;
    color: white;
    text-align: center;
}
.clockwrapper {
    display: inline-block;
    margin: 30px 0px 0px 50px;
    width: 150px;
    height: 150px;
}

我需要用 img 样式更改什么以便 A.) Canvas 和图像可以重叠(这是通过顶部实现的: Canvas 的 -150px)和 B .) 所有 Canvas 对象都出现在同一行上。

Answer 1

这是你的开始

.clock {
    white-space: nowrap;     /*  keep all wrappers on same line  */
}
canvas {
    padding-top: 0px;
    display: inline;
    margin-left: auto;
    margin-right: auto;
    left: 25%
}
.date {
    display: inline;
    padding-left: 0px;
    color: white;
    margin-left: 120px;
    font-weight: bold;
    text-align: center;
}
.date1 {
    display: inline;
    padding-left: 10px;
    color: white;
    text-align: center;
}
.clockwrapper {
    display: inline-block;
    margin: 30px 0px 0px 50px;
    width: 150px;
    height: 150px;
    display: relative;
    background: #eee;    /*  just to get the wrapper visible in this sample  */
}
.clockwrapper img {
    position: absolute;
    left: 50px;          /*  adjust to get it in position  */
    top: 30px;           /*  adjust to get it in position  */
    width: 150px;
    height: 150px;
    background: #f99;    /*  just to get the img visible in this sample  */
}

<div class="clock">
  <div class="clockwrapper">
    <canvas id="piechart0" width="150" height="150"></canvas>
    <div class="date" id="day0"></div>
    <div class="date1" id="date0"></div>
   <img src="images/clock2.jpg" id="imgclock1" width="150" height="150" class="analog"/>
  </div>
  <div class="clockwrapper">
    <canvas id="piechart1" width="150" height="150"></canvas>
    <div class="date" id="day1"></div>
    <div class="date1" id="date1"></div>
  </div>
  <div class="clockwrapper">
    <canvas id="piechart2" width="150" height="150"></canvas>
    <div class="date" id="day2"></div>
    <div class="date1" id="date2"></div>
  </div>
  <div class="clockwrapper">
    <canvas id="piechart3" width="150" height="150"></canvas>
    <div class="date" id="day3"></div>
    <div class="date1" id="date3"></div>
  </div>
  <div class="clockwrapper">
    <canvas id="piechart4" width="150" height="150"></canvas>
    <div class="date" id="day4"></div>
    <div class="date1" id="date4"></div>
  </div>
</div>