Question

我想在html5中与Canvas一起做一个项目（python中的Canvas不像在html5中那样好用：/）但是我有一个问题。

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

简单示例：

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

如您所见，第一个矩形应为“蓝色”，第二个矩形应为“黄色”。但在程序中，所有矩形都变成“黄色”。无法解释自己，为什么会这样。

之后它应该是这样的，但问题仍然存在：

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

我也失去了“click”功能（从另一个例子中复制了这个功能）。很高兴在这里得到一个tipp。我想这样做，我点击矩形，它告诉我他的号码。之后我想改变颜色。但那是未来的计划。首先，我必须解决颜色和点击功能的问题。

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

提前谢谢你：）

迎接

罗宾

PS：这是我在这里的第一个条目，这就是为什么我不太清楚它将来如何与“jsfiddle.net-Link”一起使用。如果我做对了，希望有人可以解释一下。试图按照网站上的所有说明进行操作。

Answer 1

关于您的链接：

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 -function覆盖其他项目

1 个答案: