1

看看这个例子：

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

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

4

4 回答 4

4

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

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

于 2012-12-20T13:59:56.633 回答
4

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

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

于 2012-12-20T14:02:51.800 回答
2

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

引用西蒙·萨里斯的话：

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

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

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

于 2012-12-20T14:01:24.093 回答
1

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

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

于 2012-12-20T13:59:25.680 回答