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

Question

嗨，我的第一个 javascript 项目。我想在 javascript 中创建图像并将其作为在 css 中创建的时钟的背景。一切正常，但我不知道如何引用 css .clock，所以我可以将绘制的图像作为我的 css 时钟的背景（css 文件中的第 4 行）。

我看到了其他问题，但它们大多是指其他 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>

javascript 文件（创建我想添加为背景的图像）：

var myCanvas = document.getElementById("myCanvas");
myCanvas.width = 300;
myCanvas.height = 300;

var ctx = myCanvas.getContext("2d");

// FUNCTIONS FOR DRAWING CHART
function drawLine(ctx, startX, startY, endX, endY) {
  ctx.beginPath();
  ctx.moveTo(startX, startY);
  ctx.lineTo(endX, endY);
  ctx.stroke();
}

function drawArc(ctx, centerX, centerY, radius, startAngle, endAngle) {
  ctx.beginPath();
  ctx.arc(centerX, centerY, radius, startAngle, endAngle);
  ctx.stroke();
}

function drawPieSlice(ctx, centerX, centerY, radius, startAngle, endAngle, color) {
  ctx.fillStyle = color;
  ctx.beginPath();
  ctx.moveTo(centerX, centerY);
  ctx.arc(centerX, centerY, radius, startAngle - 1.575, endAngle - 1.575);
  ctx.closePath();
  ctx.fill();
}

// FUNCTION THAT DRAWS PIE CHART
var Piechart = function (options) {
  this.options = options;
  this.canvas = options.canvas;
  this.ctx = this.canvas.getContext("2d");
  this.colors = options.colors;

  this.draw = function () {
    var total_value = 0;
    var color_index = 0;
    for (var categ in this.options.data) {
      var val = this.options.data[categ];
      total_value += val;
    }

    var start_angle = 0;
    for (categ in this.options.data) {
      val = this.options.data[categ];
      var slice_angle = (2 * Math.PI * val) / total_value;

      drawPieSlice(
        this.ctx,
        this.canvas.width / 2,
        this.canvas.height / 2,
        Math.min(this.canvas.width / 2, this.canvas.height / 2),
        start_angle,
        start_angle + slice_angle,
        this.colors[color_index % this.colors.length]
      );

      start_angle += slice_angle;
      color_index++;
    }
  };
};

// DATA
var myData = {
  "A": 15,
  "B": 25,
  "C": 12,
  "D": 8,
};

// CREATING NEW PIECHART
var myPiechart = new Piechart({
  canvas: myCanvas,
  data: myData,
  //        red        orange     yellow     green      ADD more colors if needed
  colors: ["#FF0000", "#FFBC00", "#FFFF00", "#00FF00"],
});
myPiechart.draw();

// CLOCK PART
setInterval(setClock, 1000);

const hourHand = document.querySelector("[data-hour-hand]");
const minuteHand = document.querySelector("[data-minute-hand]");
const secondHand = document.querySelector("[data-second-hand]");

function setClock() {
  const currentDate = new Date();
  const secondsRatio = currentDate.getSeconds() / 60;
  const minutesRatio = (secondsRatio + currentDate.getMinutes()) / 60;
  const hoursRatio = (minutesRatio + currentDate.getHours()) / 12;
  setRotation(secondHand, secondsRatio);
  setRotation(minuteHand, minutesRatio);
  setRotation(hourHand, hoursRatio);
}

function setRotation(element, rotationRatio) {
  element.style.setProperty("--rotation", rotationRatio * 360);
}

setClock();

css 文件（时钟）：

.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;
}

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

Answer 1

将元素 canvas#myCanvas 作为 div.clock

的子元素

  <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>

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

How can I put Javascript element into CSS background-image

html

javascript

css

background

background-image