看看这个例子:
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); // First rectangle created ctx.fillRect(20,20,150,100); // Second rectangle created ctx.fillRect(20,150,150,100); // Third rectangle created ctx.fillRect(20,300,150,100);我在这里创建了三个矩形.创建第三个矩形后,我想旋转第一个矩形.我现在如何获得第一个矩形的参考?
I created three rectangles here. After creating third rectangle I want to rotate first rectangle. How do i get reference of first rectangle now?
推荐答案画布只是一个愚蠢的像素网格.它不明白上面画了什么形状.您的代码(或您的代码使用的库)必须跟踪您绘制的形状.
A canvas is just a dumb grid of pixels. It doesn't understand what shapes have been drawn on it. Your code (or a library that your code uses) must keep track of the shapes that you've drawn.
相反,听起来您想要一个库来创建 场景图,例如 EaselJS, Paper.js 或 KineticJS.这些库将维护一个数据结构,用于跟踪在画布上绘制了哪些形状,然后在您想要操作这些形状时重新绘制它们.
Instead, it sounds like you want a library to create a scene graph, like EaselJS, Paper.js, or KineticJS. These libraries will maintain a data structure that tracks what shapes have been drawn on the canvas, and they will then redraw them when you want to manipulate those shapes.
更多推荐
如何在 HTML Canvas 中获取旧生成元素的引用?
发布评论