如何使用JavaScript在x / y位置绘制点

Question

我想以二维方式绘制点（每个都有x和y坐标）。我想知道你是否知道这样做的库或项目，所以我不必从头开始构建它。

Answer 1

使用canvas标签是执行此操作的最佳方式。以下是创建Canvas的示例：

// Create a canvas that extends the entire screen
// and it will draw right over the other html elements, like buttons, etc
var canvas = document.createElement("canvas");
canvas.setAttribute("width", window.innerWidth);
canvas.setAttribute("height", window.innerHeight);
canvas.setAttribute("style", "position: absolute; x:0; y:0;");
document.body.appendChild(canvas);

//Then you can draw a point at (10,10) like this:

var ctx = canvas.getContext("2d");
ctx.fillRect(10,10,1,1);

此外，您可以使用ImageData操作屏幕上的所有像素。

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes

Answer 2

这里有一个： http://jsdraw2d.jsfiction.com/

Answer 3

Raphaël - 一个小型的JavaScript库，可以简化您在网络上使用矢量图形的工作。

Answer 4

如果您已经使用了jQuery，那么Flot是一种非常简单（但功能强大）的绘制图形的方法。

您还可以查看Google Charts API - 保证跨浏览器：它为您提供图形，而不是画布或VML等。

Answer 5

我认为这个为你敲击了一下：

http://www.jsclasses.org/package/332-JavaScript-Calculate-coordinates-of-lines-curves-and-shapes.html

返回x和y数组中的值，以便在图形和移动中使用