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

Tam*_*Tam 8 javascript

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

小智 14

使用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);
Run Code Online (Sandbox Code Playgroud)

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

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


Lui*_*bia 4

在这里你有一个:

https://github.com/sameerb/jsDraw2D

编辑:我已经更新了之前发布的链接