[英]Clear HTML page without a canvas
我想知道是否有任何方法可以在不使用 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>"
}
无需附加新的div
,只需在每次鼠标移动时替换 html 即可。
window.addEventListener('mousemove', function (e){ linedraw(window.innerWidth/2, window.innerHeight/2, ex, ey) }); 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>" }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.