Javascript 如何处理在HTML5画布上绘制的形状并更改其属性？

我开始探索HTML5画布，我为我的问题的幼稚提前道歉。使用Flash CC，我生成了一个带有矩形的画布：

(function (lib, img, cjs, ss) {
var p; // shortcut to reference prototypes
// library properties:
lib.properties = {
    width: 550,
    height: 400,
    fps: 24,
    color: "#FFFFFF",
    manifest: []
};
// symbols:
// stage content:
(lib.canvas_test = function() {
    this.initialize();
    // Layer 1
    this.shape = new cjs.Shape();
    this.shape.graphics.beginFill().beginStroke("#669966")
    .setStrokeStyle(1,1,1).moveTo(-94,-62).lineTo(94,-62).lineTo(94,62).lineTo(-94,62).closePath();
    this.shape.setTransform(198,136);
    this.shape_1 = new cjs.Shape();
    this.shape_1.graphics.beginFill("#FF933C")
    .beginStroke().moveTo(-94,62).lineTo(-94,-62).lineTo(94,-62).lineTo(94,62).closePath();
    this.shape_1.setTransform(198,136);
    this.addChild(this.shape_1,this.shape);
}).prototype = p = new cjs.Container();
p.nominalBounds = new cjs.Rectangle(378,273,190,126);
})(lib = lib||{}, images = images||{}, createjs = createjs||{}, ss = ss||{});
var lib, images, createjs, ss;

---

现在我被卡住了。如何使用Javascript函数检索（并更改）矩形的颜色？我曾希望图形只是画布的子对象，但事实并非如此。

画布基本上是一个位图，它没有子对象。SVG的工作原理更像您想象的，但画布只有像素。如果您想更改画布，您要么需要遍历它并找到像素，要么创建一个表示绘图对象（矩形）的javascript对象，将其与画布背景分开，并在有任何更改时重新绘制背景和对象

[补充]

---

我不熟悉Flash CC，但正如评论中所指出的，可能已经有了一些功能，可以完成评论人和我自己所描述的功能——恐怕我不知道。

前面的答案是正确的，画布基本上是位图，但EaselJS提供了一种保留的图形模式，因此，您可以更改属性并更新阶段/画布以反映它们

您正在使用Flash导出生成内容，因此您应该能够通过HTML中创建的

exportRoot

访问元素。这本质上就是Flash“阶段”，由导出库中的

canvas\u test

定义的EaselJS容器表示

exportRoot = new lib.canvas_test();

您可以在canvas_测试代码中看到，每个“子”都已定义。任何图形都包装在EaselJS

Shape

实例中。还有用于处理组（容器）、位图、文本和动画（MovieClips）的类

下面是您的导出代码，已添加到后台：

创建形状后，修改形状很容易，但您必须牢记这一点来定义它们。Flash导出并没有真正为您提供这种功能，因为它只是将所有内容导出为单个链接的图形指令列表。但是，您可以很容易地进行内省，以找到要修改的命令警告：这需要EaselJS 0.7.0+才能工作。早期版本不适用于此方法

您提供的演示只有一个矩形。不幸的是，当前版本的Flash中有一个bug，它将其导出为两个形状，一个用于笔划，另一个用于填充。此示例将修改笔划

var shape = exportRoot.shape; // Access the shape instance that has the stroke
var stroke = shape.graphics._stroke;
stroke.style = "#ff0000"; // Set to red.

要进行填充，您可以在

shape_1

上执行相同的操作，但会影响

\u填充。这是一个

您还可以访问任何指令，并影响其属性。您可以在中看到完整的命令列表（完整列表请参见侧栏）。下面是修改笔划上第一个
moveTo
命令的快速示例：

var shape = exportRoot.shape;
shape.graphics._activeInstructions[0].x = -110;

您可以在此处看到该代码的一个示例：--您必须修改填充和笔划以移动它们：）
绘制到画布上的东西只是图像数据-它们在任何地方都不作为实际实体存在，您需要自己跟踪它们。这就是说，生成的代码似乎正在使用，这似乎可以为您进行一些对象跟踪（即
new cjs.Shape（）
）。您是正确的，除了此示例使用EaselJS（从Flash CC导出），这是您建议的JavaScript对象方法。请注意，这不是推荐的方法，只是在本例中有效的方法。如果你依赖这一点，并改变你的出口，它很可能会崩溃。例如，“填充”和“笔划”有时指向您期望的填充和笔划，但可能不是。