Question

我开始探索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函数检索（和更改）矩形的颜色？我曾希望这些形状只是画布的孩子，但事实并非如此。

Answer 1

Canvas基本上是一个位图，它没有孩子。 SVG更像你想象的工作，但画布只有像素。如果你想要更改画布，你要么必须经历它并找到像素，要么创建一个表示你的绘图对象（矩形）的javascript对象，将它与画布背景分开，然后重新绘制有任何变化时的背景和对象。

[补充] 我对Flash CC并不熟悉，但正如评论中指出的那样，也许已经有一些能力可以做评论者和我自己所描述的 - 我害怕我不知道。

Answer 2

早期的答案是正确的，Canvas基本上是一个位图，但EaselJS为您提供了一个保留的图形模式，因此您可以更改属性并更新舞台/画布以反映它们。

您正在使用Flash导出来生成内容，因此您应该能够通过HTML中创建的exportRoot访问您的元素。这基本上是Flash“阶段”，由导出的库中canvas_test定义的EaselJS容器表示。

exportRoot = new lib.canvas_test();

您可以在canvas_test代码中看到，每个“子”都已定义。任何图形都包含在EaselJS Shape实例中。还有用于处理组（容器），位图，文本和动画（MovieClip）的类。

以上是您在上面添加的导出代码： http://jsfiddle.net/lannymcnie/b5me4xa2/

创建形状后很容易修改形状，但您必须考虑到这些形状。 Flash导出并不能真正为您提供此功能，因为它只是将所有内容导出为单个链接图形指令列表。但是，您可以非常轻松地对其进行内省，以找到要修改的命令。 警告：这需要EaselJS 0.7.0+才能运行。早期版本不适用于此方法

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

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上执行相同操作，但会影响_fill。这是updated sample

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

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

您可以在此处查看该代码的示例：http://jsfiddle.net/lannymcnie/b5me4xa2/2/ - 您必须同时修改填充和描边以移动它们：）

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

2 个答案: