如何将Javascript元素放入CSS背景图像_Javascript_Html_Css_Background_Background Image

如何将Javascript元素放入CSS背景图像

javascript html css

如何将Javascript元素放入CSS背景图像,javascript,html,css,background,background-image,Javascript,Html,Css,Background,Background Image,嗨，我的第一个javascript项目。我想用javascript创建图像，并将其作为css中创建的时钟的背景。一切都很好，但我不知道如何引用css.clock，这样我就可以将绘制的图像作为我的css时钟的背景（css文件中的第四行）我看到了其他问题，但它们主要涉及其他javascript绘制的图像。我想添加myPiechart.draw作为css时钟的背景，或者将其另存为图像并设置为css时钟的背景。哪一个更容易做。这里有下面的代码，如果您复制粘贴，您将看到工作时钟和创建的图像： html文

嗨，我的第一个javascript项目。我想用javascript创建图像，并将其作为css中创建的时钟的背景。一切都很好，但我不知道如何引用css.clock，这样我就可以将绘制的图像作为我的css时钟的背景（css文件中的第四行）

我看到了其他问题，但它们主要涉及其他javascript绘制的图像。我想添加myPiechart.draw作为css时钟的背景，或者将其另存为图像并设置为css时钟的背景。哪一个更容易做。这里有下面的代码，如果您复制粘贴，您将看到工作时钟和创建的图像：

html文件：

<!DOCTYPE html>

<head>
  <link href="styles.css" rel="stylesheet">
  <script defer src="script.js"></script>
</head>

<body>
  <div class="clock">
    <div class="hand hour" data-hour-hand></div>
    <div class="hand minute" data-minute-hand></div>
    <div class="hand second" data-second-hand></div>
  </div>
  <canvas id="myCanvas"></canvas>
  <script type="text/javascript" src="script.js"></script>
</body>

</html>

css文件（时钟）：

如果有更好的方法，我愿意接受建议。

将元素画布放置在div.clock的子元素myCanvas中

  <div class="clock">
    <div class="hand hour" data-hour-hand></div>
    <div class="hand minute" data-minute-hand></div>
    <div class="hand second" data-second-hand></div>
    <canvas id="myCanvas"></canvas>
  </div>

谢谢你，我快要发疯了。我改变了css和js中的所有内容，但没有涉及html。

.clock {
  width: 300px;
  height: 300px;
  /*background-image: url("piechart.png");  *//*HERE I WANT TO ADD PIECHART IMAGE*/
  border-radius: 50%;
  border: 2px solid black;
  position: relative;
}

.clock .number {
  --rotation: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  transform: rotate(var(--rotation));
  font-size: 1.5rem;
}

.clock .hand {
  --rotation: 0;
  position: absolute;
  bottom: 50%;
  left: 50%;
  border: 1px solid white;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  transform-origin: bottom;
  z-index: 10;
  transform: translateX(-50%) rotate(calc(var(--rotation) * 1deg));
}

.clock::after {
  content: "";
  position: absolute;
  background-color: black;
  z-index: 11;
  width: 15px;
  height: 15px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.clock .hand.second {
  width: 3px;
  height: 45%;
  background-color: red;
}

.clock .hand.minute {
  width: 7px;
  height: 40%;
  background-color: black;
}

.clock .hand.hour {
  width: 10px;
  height: 35%;
  background-color: black;
}

  <div class="clock">
    <div class="hand hour" data-hour-hand></div>
    <div class="hand minute" data-minute-hand></div>
    <div class="hand second" data-second-hand></div>
    <canvas id="myCanvas"></canvas>
  </div>