Javascript 在HTML5的画布元素中使用Zigfu（kinect）_Javascript_Html_Kinect

Javascript 在HTML5的画布元素中使用Zigfu（kinect）

javascript html

Javascript 在HTML5的画布元素中使用Zigfu（kinect）,javascript,html,kinect,Javascript,Html,Kinect,我在Zigfu的网站上浏览了制作用户雷达的初始教程。我很难让这个雷达在画布元素中工作我想在画布中使用绘图方法，所以我不想在容器中使用这里是我到目前为止直接从教程中获取的代码。非常感谢你的阅读 function loaded() { var radardiv = document.getElementById('container'); var radar = { onuserfound: function (user) { var userdiv

我在Zigfu的网站上浏览了制作用户雷达的初始教程。我很难让这个雷达在画布元素中工作

我想在画布中使用绘图方法，所以我不想在容器中使用

这里是我到目前为止直接从教程中获取的代码。非常感谢你的阅读

function loaded() {

   var radardiv = document.getElementById('container');

   var radar = {
      onuserfound: function (user) {
        var userdiv = document.createElement('div');
        userdiv.className = 'user';
        user.radarelement = userdiv;
        radardiv.appendChild(user.radarelement);
      },
      onuserlost: function (user) {
        radardiv.removeChild(user.radarelement);
      },
      ondataupdate: function (zigdata){
        for (var userid in zigdata.users){
            var user = zigdata.users[userid];
            var pos = user.position;
          //console.log(pos);
            var el = user.radarelement;
            var parentElement = el.parentNode;
            var zrange = 2000;
            var xrange = 700;
            var pixelwidth = parentElement.offsetWidth;
            var pixelheight = parentElement.offsetHeight;
            var heightscale = pixelheight / zrange;
            var widthscale = pixelwidth / xrange;
            el.style.left = (((pos[0] / xrange) + 0.5) * pixelwidth - (el.offsetWidth / 2)) + "px";
            el.style.top = ((pos[2] / zrange) * pixelheight - (el.offsetHeight / 2)) - 150 + "px";
        }

      }
   };

   zig.addListener(radar);
}
document.addEventListener('DOMContentLoaded', loaded, false);



<body>

<div id = 'container'></div>
</body>
</html>

<style>
div#container {
width: 800px;
height: 600px;
border: 1px solid black;
overflow: hidden;
 }
 div.user {
position: relative;
width: 10px;
height: 10px;
background-color: red;
  }

函数加载（）{
var radardiv=document.getElementById（'container'）；
无功雷达={
onuserfound:函数（用户）{
var userdiv=document.createElement（'div'）；
userdiv.className='user'；
user.raderement=userdiv；
radardiv.appendChild（user.radareRelation）；
},
onuserlost:函数（用户）{
radardiv.removeChild（user.radarelement）；
},
ondataupdate:函数（zigdata）{
for（zigdata.users中的var userid）{
var user=zigdata.users[userid]；
var pos=用户位置；
//控制台日志（pos）；
var el=user.radRelation；
var parentElement=el.parentNode；
var zrange=2000；
var xrange=700；
var pixelwidth=parentElement.offsetWidth；
var pixelheight=parentElement.offsetHeight；
var heightscale=像素高度/zrange；
var widthscale=像素宽度/xrange；
el.style.left=（（位置[0]/xrange）+0.5）*像素宽度-（el.offsetWidth/2））+“px”；
el.style.top=（（位置[2]/zrange）*像素高度-（el.offsetHeight/2））-150+“像素点”；
}
}
};
zig.addListener（雷达）；
}
document.addEventListener（'DOMContentLoaded'，loaded，false）；
分区#集装箱{
宽度：800px；
高度：600px；
边框：1px纯黑；
溢出：隐藏；
}
分区用户{
位置：相对位置；
宽度：10px；
高度：10px；
背景色：红色；
}

您似乎缺少了javascript周围的

标记，以及一些用于用户的css。另外-您的“container”div缺少a>

尝试从底部复制代码，或者-检查用户雷达的更清晰实现。

本教程中使用的雷达使用DOM div放置和定位。
不幸的是，这不能在canvas元素中使用

有多种方法可以覆盖画布和其他变通方法。见：

您还可以直接从插件获取数据，并自己绘制到画布上。下面是一个使用three.js和zigfu在画布上绘制骨架的演示：

对不起，我没说清楚。我已经得到了为雷达工作的教程。我只希望它位于canvas元素中，而不是普通的div。