如何在 HTML Canvas 中获取旧生成元素的引用？答案

【问题标题】：How do I get reference of old generated elements in HTML Canvas?如何在 HTML Canvas 中获取旧生成元素的引用？
【发布时间】：2012-12-20 13:56:32
【问题描述】：

看看这个例子：

  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);

我在这里创建了三个矩形。创建第三个矩形后，我想旋转第一个矩形。我现在如何获得第一个矩形的参考？

【问题讨论】：

标签： javascript html html5-canvas

【解决方案1】：

画布只是一个愚蠢的像素网格。它不明白上面画了什么形状。您的代码（或您的代码使用的库）必须跟踪您绘制的形状。

相反，听起来您想要一个库来创建scene graph，例如EaselJS、Paper.js 或KineticJS。这些库将维护一个数据结构，用于跟踪在画布上绘制了哪些形状，然后在您想要操作这些形状时重新绘制它们。

【讨论】：

【解决方案2】：

您不会“获得参考”矩形或画布。你所拥有的只是一个带有上下文的画布。你可以在上面画画。期间。

如果您想移动第一个矩形，请将其清除（使用clearRect）并重新绘制新的。

【讨论】：

【解决方案3】：

画布本身只是像素。它知道如何绘制矩形，但不让它们分层。

引用Simon Sarris：

HTML5 Canvas 只是位图的绘图表面。你设置了一个画（用颜色和线条粗细说），画那个东西，然后画布不知道那个东西：它不知道它在哪里或者它是什么，它只是像素。如果要绘制矩形和让它们四处移动或可选择然后你必须编写所有代码从头开始，包括记住你绘制它们的代码。

唯一的例外是isPointInPath 方法，但它有局限性。

然而，有一些库为 Canvas 提供面向对象的接口。喜欢Fabric.js 或KineticJS。它们会记住您绘制的对象（矩形、圆形等），并且可以将它们一层一层地叠加，四处移动并添加鼠标/触摸事件。很像 DOM。

【讨论】：

请注意，Raphaël 使用 SVG 和 VML，而不是画布。

【解决方案4】：

像fillRect() 这样的绘图函数不会返回任何东西（返回 void）。

这意味着它只是渲染像素，它不会创建一个矩形对象并返回它。您需要自己存储矩形坐标。

【讨论】：