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

你没有用画布“获得矩形或东西的参考”。你所拥有的只是一个带有上下文的画布。你可以在上画。周期。

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

Answer 2

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

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

Answer 3

Canvas本身只是像素。它知道如何绘制矩形，但不保持它们分层。

引用Simon Sarris：

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

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

但是，有一些库为Canvas提供面向对象的接口。与Fabric.js或KineticJS一样。它们会记住您绘制的对象（矩形，圆形等），并可以将它们叠加在一起，移动并添加鼠标/触摸事件。很像DOM。

Answer 4

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

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

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

4 个答案: