如何使用JavaScript在x/y位置繪製點數

Question

我想以二維方式繪製點（每個點都有x和y座標）。我想知道你是否知道這樣做的庫或項目，這樣我就不必從頭開始構建它。

Answer 1

這裏有一個： http://jsdraw2d.jsfiction.com/

Answer 2

Raphaël - 一個小型的JavaScript庫，應簡化在網絡上矢量圖形的工作。

Answer 3

使用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 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陣列中的圖形和運動易用