Reflect a user's position and rotation in runtime on a minimap in Aframe

问题

I am trying to make a minimap for my vr scene and update the user's position and location in runtime. I already made the following:

<script>
        AFRAME.registerComponent('cam-listener', {
            init: function(){
                var canvas = document.querySelector("#myCanvas");
                //line 124(log result in the image)
                console.log(canvas);
                var context = canvas.getContext("2d");
                //line 126(log result in the image)
                console.log(context);

                function drawTriangle(x, y) {
                  // the triangle
                  context.beginPath();
                  context.moveTo(x, y);
                  context.lineTo(x - 6, y + 10);
                  context.lineTo(x + 6, y + 10);
                  context.closePath();

                  // the outline
                  context.lineWidth = 4;
                  context.strokeStyle = "rgba(102, 102, 102, 1)";
                  context.stroke();

                  // the fill color
                  context.fillStyle = "rgba(255, 204, 0, 1)";
                  context.fill();
                }
                drawTriangle(100, 100);
            }
            tick: function(){
                console.log(this.el.getAttribute('position'));
                console.log(document.querySelector('[camera]').getAttribute('rotation'));
            }
        })
 </script>

below is the div and canvas:

<div id="canvasWrapper">
        <canvas id="myCanvas" width="223.99" height="358.93">
        </canvas>
</div>

but the thing is that when I run the script, the console gives me very confusing result:(below is the image link)

canvas retrieved but context is null

but if I do not use Aframe component system and put the scripts bottom of the body, everything works. So does anyone know the reason? Thanks in advance!

BTW, if anyone know how to make a minimap in Aframe vr scene I am glad to discuss and learn. If not I will post my solution afterwards.

来源：https://stackoverflow.com/questions/53277752/reflect-a-users-position-and-rotation-in-runtime-on-a-minimap-in-aframe

标签

javascript

html5-canvas

aframe

webvr