Javascript 在使用JS创建设备方向的可视化表示方面需要一些帮助吗_Javascript_Css

Javascript 在使用JS创建设备方向的可视化表示方面需要一些帮助吗

javascript css

Javascript 在使用JS创建设备方向的可视化表示方面需要一些帮助吗,javascript,css,Javascript,Css,基本上，我想要创建设备方向值alpha、beta和gamma的可视化表示。到目前为止，我已经设法使用innerHTML以纯文本形式显示这些值，但我想为每个值创建一系列“条”。我画了一幅非常粗糙的图画，描绘了我的想法：基本上，我希望条形图随着alpha、beta和gamma值的变化而移动。这就是我的代码现在的样子 <!DOCTYPE HTML> <html> <body> <p>Alpha: <span id="alpha"&g

基本上，我想要创建设备方向值alpha、beta和gamma的可视化表示。到目前为止，我已经设法使用innerHTML以纯文本形式显示这些值，但我想为每个值创建一系列“条”。我画了一幅非常粗糙的图画，描绘了我的想法：

基本上，我希望条形图随着alpha、beta和gamma值的变化而移动。这就是我的代码现在的样子

<!DOCTYPE HTML>
<html>

  <body>
    <p>Alpha: <span id="alpha"></span></p>
    <p>Beta: <span id="beta"></span></p>
    <p>Gamma: <span id="gamma"></span></p>

    <canvas id="myCanvas" width="400" height="400"></canvas>
    <script>
      // Listen for device orientation event
      window.ondeviceorientation = function(eventData)
      {
        // Show alpha, beta and gamma values
        document.getElementById('alpha').innerHTML = Math.round(eventData.alpha);
        document.getElementById('beta').innerHTML = Math.round(eventData.beta);
        document.getElementById('gamma').innerHTML = Math.round(eventData.gamma);
      }
    </script>
  </body>
</html>


阿尔法：
测试版：
伽马：
//侦听设备定向事件
window.ondeviceorientation=函数（eventData）
{
//显示alpha、beta和gamma值
document.getElementById（'alpha'）.innerHTML=Math.round（eventData.alpha）；
document.getElementById（'beta'）.innerHTML=Math.round（eventData.beta）；
document.getElementById（'gamma'）.innerHTML=Math.round（eventData.gamma）；
}

我非常怀疑我可以使用内部HTML来实现这一点，因为我认为我需要使用CSS样式。这使我认为画布可能会工作，但我无法使用ondeviceorientation初始化它。如果您能帮我完成此任务，我将不胜感激。

您不需要画布。您可以通过改变跨距的宽度以及使用CSS设置颜色来实现这一点

首先，确保您的跨距具有CSS属性

display:inline block

或

display:block

，否则更改宽度将无效。或者，可以将其设置为div而不是span。还要确保它有一个高度属性集，例如

30px

接下来，您可以使用css或内联样式来设置alpha、beta和gamma的

背景色

属性。然后使用javascript根据设备方向简单地更改

元素.style.width

属性（在px中）

<>你可能想深入考虑的是你想要的栏的大小和它们的精确行为。这个设计决定取决于您，所以我不会详细解释下面的代码是如何工作的，但基本上我会根据值的范围来确定它们的大小。我将alpha、beta和gamma的值分别转换为它们总范围的百分比，然后将其乘以我想要的条的最大宽度

我从这里抓到了靶场：

一般公式适用于

[a，b]

范围内的值和

max_w

的最大条形宽度，以及

值的alpha、beta或gamma值，条形的计算宽度为：
width=max_w*（-a+值）/（b-a））

别忘了在结尾加上“px”

//侦听设备定向事件
window.ondeviceorientation=函数（eventData）
{
设maxWidth=200；
//显示alpha、beta和gamma值
document.getElementById（'alpha'）.style.width=Math.round（maxWidth*eventData.alpha/360）+“px”；
document.getElementById（'beta'）.style.width=Math.round（maxWidth*（180+eventData.beta）/360）+“px”；
document.getElementById（'gamma'）.style.width=Math.round（maxWidth*（90+eventData.gamma）/180）+“px”；
}
p span{
高度：30px；
显示：内联块；
}
#阿尔法{
背景颜色：绿色；
}
#β{
背景颜色：黄色；
}
#伽马射线{
背景颜色：紫色
}
阿尔法：
测试版：
Gamma:
您不需要画布。您可以通过改变跨距的宽度以及使用CSS设置颜色来实现这一点
首先，确保您的跨距具有CSS属性display:inline block
或display:block
，否则更改宽度将无效。或者，可以将其设置为div而不是span。还要确保它有一个高度属性集，例如30px

接下来，您可以使用css或内联样式来设置alpha、beta和gamma的背景色
属性。然后使用javascript根据设备方向简单地更改元素.style.width
属性（在px中）
<>你可能想深入考虑的是你想要的栏的大小和它们的精确行为。这个设计决定取决于您，所以我不会详细解释下面的代码是如何工作的，但基本上我会根据值的范围来确定它们的大小。我将alpha、beta和gamma的值分别转换为它们总范围的百分比，然后将其乘以我想要的条的最大宽度
我从这里抓到了靶场：
一般公式适用于[a，b]
范围内的值和max_w
的最大条形宽度，以及值的alpha、beta或gamma值，条形的计算宽度为：
width=max_w*（-a+值）/（b-a））

别忘了在结尾加上“px”

//侦听设备定向事件
window.ondeviceorientation=函数（eventData）
{
设maxWidth=200；
//显示alpha、beta和gamma值
document.getElementById（'alpha'）.style.width=Math.round（maxWidth*eventData.alpha/360）+“px”；
document.getElementById（'beta'）.style.width=Math.round（maxWidth*（180+eventData.beta）/360）+“px”；
document.getElementById（'gamma'）.style.width=Math.round（maxWidth*（90+eventData.gamma）/180）+“px”；
}
p span{
高度：30px；
显示：内联块；
}
#阿尔法{
背景颜色：绿色；
}
#β{
背景颜色：黄色；
}
#伽马射线{
背景颜色：紫色
}
阿尔法：
测试版：
Gamma:
上一张海报，Khauri McClain，张贴了一个关于静态表示方向值的好建议。但是，如果“移动”是指动画（因此指画布），那么您仍然可以在不使用画布的情况下进行移动，但可以使用instea