javascript - 使用画布或 html、css 跨越任何设备并位于中心

Question

我正在使用 JavaScript 和 JQuery 制作一个应用程序，它会告诉用户设备是否是直的，基本上就像一个水平仪。我想在屏幕中间画一条直线，并且无论设备的大小如何，我都希望它能够响应。这将用于手机和平板电脑。我用画布画了一条线，到目前为止我不确定这是否是解决这个问题的正确方法？

如果有人能给我任何建议，我将不胜感激。到目前为止，下面是我的画布线。我已经包含了一些我的意思的粗略图。

const c = document.getElementById("LineCanvas");
const drw = c.getContext("2d");
drw.beginPath();
drw.moveTo(10,45);
drw.lineTo(180,47);
drw.lineWidth = 5;
drw.strokeStyle = '#006400';
drw.stroke();

如果手机是直线对齐的，这条线将是绿色的，否则是红色的

标签： javascripthtmljquerycsshtml5-canvas

Answer 1

要绘制线条，您可以使用伪元素HTML或body您想在特定页面中使用的任何特定标签或单击，然后通过transform:rotate() ;或更新旋转rotate3D()

示例（如果没有 javascript，则必须通过您的应用从您的设备获取旋转值）：

let level = document.querySelector("#level");
document.querySelector("#spirit").onclick = function() {
  level.classList.toggle('show');
}

#level {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  pointer-events: none;
}

#level.show {
  display: block;
}

#level::before {
  content: '';
  position: absolute;
  width: 200vmax;
  margin: 0 -50vmax;
  border-top: 1px solid;
  box-shadow: 0 0 1px 5px #bee;
  top: 50%;
  transform: rotate(0deg);
}

#level.show~#spirit::before {
  content: 'Hide';
}

#level:not(.show)~#spirit::before {
  content: 'Show';
}


/* animation to fake phone device moving */

#level::before {
  animation: rt 10s infinite;
}

@keyframes rt {
  20% {
    transform: rotate3d(1, -1, 1, -0.25turn);
  }
  40% {
    transform: rotate3d(1, 1, 1, 0.5turn);
  }
  60% {
    transform: rotate3d(1, -1, 1, -0.75turn);
  }
  80% {
    transform: rotate3d(1, 1, -1, -0.5turn);
  }
}

<div id="level">
  <!-- to show on a single page or via js on user request -->
</div>
<button id="spirit" type=button> that spirit level</button>