在 <Canvas> 上下文中更改颜色答案

【问题标题】：Changing colors on a <Canvas> context在 <Canvas> 上下文中更改颜色
【发布时间】：2013-12-05 05:50:59
【问题描述】：

我刚开始使用 Javascript 和 Canvas 标记，并从中获得了很多乐趣，直到我遇到了这个问题……基本上我在画布上绘制了三个不同的对象。大黑色矩形的背景，然后是两个形状的矩形和文本。我希望它们是两种不同的颜色，所以我在绘制每种颜色之前都使用了 fillstyle()。问题是浏览器似乎在第一次调用之后忽略了对 fillstyle() 的每次调用，并坚持使用我选择的第一种颜色。我已经尝试过使用和不使用 beginPath() closePath(), fill() 语句，它似乎可以使用或不使用这些语句，所以我不确定是否需要我在研究这个问题时看到它使用过.我尝试使用 RGB 值而不是颜色名称。没有运气。

     //background
     context.fillStyle = "Black";
     context.beginPath();
 context.fillRect(0, 0, 500, 300);
 context.closePath();
 context.fill();    

 //text
 context.fillStyle  = "Red";
     context.font = "20px Sans-Serif";
     context.textBaseline = "top";
     context.beginPath();
 context.fillText  ("TEXT", x, y );
 context.closePath();
 context.fill();     

 //Test block
 context.fillstyle = "Green";
 context.beginPath();
 context.fillRect(0,0,30,20);
 context.closePath();
 context.fill();

【问题讨论】：

标签： javascript html canvas

【解决方案1】：

您的测试块似乎有错误：

context.fillstyle = "Green";

应该是

context.fillStyle = "Green";

【讨论】：

另外，您的 x 和 y 坐标是否为 fillText 定义？这个JSFiddle 有效
谢谢，我讨厌这种情况。我非常注意寻找错别字的代码。