Javascript 绘制3行html5（通过deviceorientation的alpha、beta、gamma）_Javascript_Html_Canvas

Javascript 绘制3行html5（通过deviceorientation的alpha、beta、gamma）

javascript html canvas

Javascript 绘制3行html5（通过deviceorientation的alpha、beta、gamma）,javascript,html,canvas,Javascript,Html,Canvas,我想通过html5使用deviceorientation alpha、beta和gamma数据画3条线 <html> <canvas id="mycanvas"></canvas> <script> window.addEventListener('deviceorientation', function(e) {draw(e.gamma, e.beta, e.alpha);}, false); function draw(g,b,a) {

我想通过html5使用deviceorientation alpha、beta和gamma数据画3条线

<html>
<canvas id="mycanvas"></canvas>
<script>
window.addEventListener('deviceorientation', function(e) {draw(e.gamma, e.beta, e.alpha);}, false);

function draw(g,b,a)
{
  var gamma = Math.round(g);
  var beta = Math.round(b);
  var alpha = Math.round(a);

  var canvas = document.getElementById('mycanvas');
  var cx = canvas.getContext('2d');

  // how can i draw this 3 lines ?
}
</script>
</html>

以下是三条矢量线的示例：

演示：[]

我想我明白你的要求了。以下是一些建议：

使用three.js并绘制轴。这是一个例子。使用DeviceOrientation连接three.js控件。Three.js已经在Three.DeviceOrientationControl中提供了此类控制。这是一个例子。将你的三视角相机放置在一个你可以看到所有轴的位置。

我知道这是一篇老文章，但希望能有所帮助。

请提供更多信息，说明三行中的每一行与alpha、beta和gamma的关系。我添加了一个示例alpha:z轴、beta:x轴和gamma:y轴。我不明白的是，屏幕上需要哪些行。假设设备放在桌子上，屏幕上的三条线是什么样子？如果设备垂直放置，屏幕上的三条线会是什么样子？如果设备位于一张桌子上，因此它取决于alpha，则设备可能朝向您的左侧或右侧，因为gamma和beta将等于0。如果您有一台设备，您可以使用此链接进行测试，您需要3D轴x、y的2D表示，z，根据设备的方向而变化。首先我建议你看看