Canvas: fillStyle-函数覆盖其他项目

Question

我想在 html5 中与 Canvas 合作完成一个项目（python 中的 Canvas 不如 [=43] 中的效果好=] :/ ) 但我有一个问题。

我想要一些不同颜色的矩形。奇数矩形（例如 1、3、...）应该具有与其他矩形不同的颜色。但是我的问题也是在没有 if 函数的情况下开始的。

简单示例：

[http://jsfiddle.net/a7pwuynb/][1]

如您所见，第一个矩形应该是 "blue"，第二个应该是 "yellow"。但是在程序中所有的矩形都变成了"yellow"。无法解释自己，为什么会这样。

之后应该是这样的，但是问题还在：

[http://jsfiddle.net/r2g9ybpw/][2]

我也迷失了 "click"-函数（从另一个示例复制了该函数）。也很高兴在这里得到小费。我想让它像这样，我点击矩形，它会告诉我他的号码。之后我想改变颜色。但这是未来的计划。首先，我必须解决颜色和点击功能的问题。

很高兴从您的网站获得帮助。

提前谢谢你:)

问候

罗宾

P.S.: 这是我在这里的第一个条目，这就是为什么我不太明白它应该如何在未来与 "jsfiddle.net-Link 一起工作。希望如果我做对了，你们有人可以向我解释一下。试着按照网站上给出的所有说明进行操作。

Answer 1

关于你的link：

ctx.fillStyle = '#FA6900';
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.shadowBlur    = 4;
ctx.shadowColor   = 'rgba(204, 204, 204, 0.5)';
ctx.fillRect(0,0,15,150);
ctx.save();

ctx.fillStyle = '#E0E4CD';
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.shadowBlur    = 4;
ctx.shadowColor   = 'rgba(204, 204, 204, 0.5)';
ctx.fillRect(30,0,30,150);
ctx.save();

使用 ctx.save() 上下文被压入堆栈。这里的堆栈大小是 2.

ctx.restore();
ctx.beginPath();
ctx.arc(185, 75, 22, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();

ctx.restore();
ctx.beginPath();
ctx.arc(260, 75, 15, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();

使用 context.restore() 从堆栈中弹出上下文。换句话说，您当前的上下文是您保存的最后一个上下文（例如，带有 fillStyle #E0E4CD 的那个）。请注意 beginPath() 和 closePath() 出现在第二个 arc 方法被调用！

Canvas: fillStyle-函数覆盖其他项目

Canvas: fillStyle-function overwriting other items

jquery

canvas

rectangles

html5-canvas