清除 HTML 没有 canvas 的页面

Question

我想知道是否有任何方法可以在不使用 canvas 的情况下清除 HTML 页面。

我正在尝试使用不带 canvas 的 JavaScript 制作一个简单的程序，该程序从 window 的中心到鼠标指向的任何位置画一条线。我可以随时随地在鼠标移动时成功地绘制一条新线，但不知道如何在不制作 canvas 和使用 clearRect().

的情况下清除页面

没有canvas有没有办法清除页面？

以防万一有人觉得有用，这是我的代码：

      window.addEventListener('mousemove', function (e){
      linedraw(window.innerWidth/2, window.innerHeight/2, e.x, e.y)
      });

      function linedraw(x1, y1, x2, y2) {
    if (x2 < x1) {
        tmp = x2 ; x2 = x1 ; x1 = tmp
        tmp = y2 ; y2 = y1 ; y1 = tmp
    }

    lineLength = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
    m = (y2 - y1) / (x2 - x1)

    degree = Math.atan(m) * 180 / Math.PI

    document.body.innerHTML += "<div class='line' style='transform-origin: top left; transform: rotate(" + degree + "deg); width: " + lineLength + "px; height: 1px; background: black; position: absolute; top: " + y1 + "px; left: " + x1 + "px;'></div>"
}

Answer 1

无需附加新的 div，只需在每次鼠标移动时替换 html。

window.addEventListener('mousemove', function (e){
    linedraw(window.innerWidth/2, window.innerHeight/2, e.x, e.y)
});

function linedraw(x1, y1, x2, y2) {
    if (x2 < x1) {
        tmp = x2 ; x2 = x1 ; x1 = tmp
        tmp = y2 ; y2 = y1 ; y1 = tmp
    }

    lineLength = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
    m = (y2 - y1) / (x2 - x1)

    degree = Math.atan(m) * 180 / Math.PI

    // `document.body.innerHTML = ` instead of `document.body.innerHTML += `
    document.body.innerHTML = "<div class='line' style='transform-origin: top left; transform: rotate(" + degree + "deg); width: " + lineLength + "px; height: 1px; background: black; position: absolute; top: " + y1 + "px; left: " + x1 + "px;'></div>"
}

清除 HTML 没有 canvas 的页面

Clear HTML page without a canvas

javascript

canvas

refresh