Question

我不确定这是否是正确的问题。我没有设法为不同的对象设置不同的颜色。

如下所示，它们都变红了，

function Body(x, y, w, h, color, mode){
...
this.color = color;
this.draw = function(){     
    ctx.fillRect(this.x, this.y, this.w, this.h);
    ctx.fillStyle = this.color;
};

var hero = new Body(10, 50, 30, 40, "red", 1);
var page = new Body(500, 150, 5, 5, null, 0);
var poop = new Body(40, 50, 4, 4, null, 1);
var floor = new Body(30, 300, 600, 30, null, 0);

即使我在ctx.fillStyle = null;之后添加ctx.fillStyle = this.color; 如果我将其他对象设置为具有这样的特定颜色：

var hero = new Body(10, 50, 30, 40, "red", 1);
var page = new Body(500, 150, 5, 5, "blue", 0);

代码错误和颜色似乎是随机给出的。

Answer 1

fillStyle设置之后绘制的形状的填充颜色。您无法修改已经绘制的内容。因此改变陈述的顺序：

ctx.fillStyle = this.color; ctx.fillRect(this.x, this.y, this.w, this.h);

Answer 2

这是一个有效的例子：

＆＃13;

(function () {
  "use strict";
  
  var cvs, ctx;
  
  cvs = document.getElementById("cvs");
  ctx = cvs.getContext("2d");
  
  ctx.fillStyle = "#ff0000";
  ctx.fillRect(10, 10, 10, 10);
  ctx.fillStyle = "#00ff00";
  ctx.fillRect(20, 20, 10, 10);
  ctx.fillStyle = "#0000ff";
  ctx.fillRect(30, 30, 10, 10);
}());

＆＃13;

<canvas id="cvs"></canvas>

＆＃13;

如何使用fillStyle

2 个答案: