javascript - 如何获取 HTML Canvas 中旧生成元素的引用？

Question

看看这个例子:

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

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

Answer 1

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

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