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

Question

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

(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 函数检索（和更改）矩形的颜色？我曾希望形状只是 canvas 的子代，但事实并非如此。

Answer 1

Canvas 基本上是位图，没有子项。 SVG 的工作方式更像您想象的那样，但 canvas 只有像素。如果你想改变一个 canvas 你要么必须遍历它并找到像素，要么创建一个代表你的绘图对象（矩形）的 javascript 对象，将它与你的绘图对象分开canvas 背景，有变化时重新绘制背景和对象。

[已添加] 我不熟悉 Flash CC，但正如评论中所指出的，也许那里已经有一些能力可以做评论者和我自己所描述的事情——恐怕我不知道。

Answer 2

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

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

exportRoot = new lib.canvas_test();

可以看到在canvas_test代码中，每个"child"都定义了。任何图形都包装在 EaselJS Shape 个实例中。还有类用于处理组（容器）、位图、文本和动画 (MovieClips)。

这是您在上面添加到场景中的导出代码： http://jsfiddle.net/lannymcnie/b5me4xa2/

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

您提供的演示只有一个矩形。不幸的是，当前版本的 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 canvas 上绘制的形状并更改其属性？

How to address a shape drawn on a HTML5 canvas and change its properties?

html

javascript

canvas

easeljs

createjs