javascript - 我怎样才能 "colour"屏幕的特定部分使用坐标？

Question

我刚刚开始使用 Leap Motion(它非常有趣)。 Leap 主要使用向量。现在我想创建一个程序，可以在其中可视化矢量指向的位置。我能想象做到这一点的唯一方法是使用打开此功能时出现的小图像，并使用 img.style.left 、 img.style.top 指令进行定位。还有其他想法吗？

Answer 1

如果您的目标是表示 2D 矢量，您可以使用 Canvas 来绘制线条。

Canvas 就像一个div，但你可以在里面画任何你想要的东西，我对Leap Motion一无所知，但如果你想在精确的坐标处画直线和圆，这可能是一个很好的解决方案，而不是工作与 DOM 本身。

JS 部分如下所示:

var canvas = document.getElementById('my-canvas');
var ctx = canvas.getContext('2d');

//For exemple here is how to draw a rectangle
//fillStyle support all valid css color
ctx.fillStyle = "rgba(50, 255, 24, 0.7)";
//Create the rectangle, with (startX, startY, height, width)
ctx.fillRect(20, 15, 50, 50);

ctx.beginPath(); //Tells canvas we want to draw
ctx.moveTo(250,250); //Moves the cursor to the coordinates (250, 250);
ctx.lineTo(75, 84); //Draws a line from the cursor (250, 250) to (75, 84);
ctx.closePath(); //Tells canvas to 'close' the drawing

ctx.strokeStyle = "red";
ctx.stroke(); //Draws the line stroke

HTML 很简单:

<canvas id="my-canvas" height="500px" width="500px">
    Here is the text displayed when the browser doesnt support canvas.
</canvas>

我制作了一个 jsfiddle 来向您展示我们可以使用 Canvas 做哪些简单的事情。 http://jsfiddle.net/pq8g0bf0/1/

一个学习 Canvas 的好网站:http://www.html5canvastutorials.com/tutorials/html5-canvas-element/

由于它是 javascript，因此您可以自由地计算向量坐标、添加事件监听器等...