HTML Canvas可以使用多个fillStyles来绘制不同的颜色吗？

Question

使用单个画布，我绘制了五个框，但是当我填充它们时，只有最后的fillStyle应用于所有框，尽管其他框已经分配了fillStyles。

e.g：

//Create AnswerBox 2
var context2 = document.getElementById("canvas").getContext("2d");
context2.rect(500, 410, 800, 100);
context2.fillStyle = "#bdff00";
context2.fill();

//Create AnswerBox 3
var context3 = document.getElementById("canvas").getContext("2d");
context3.rect(500, 520, 800, 100);
context3.fillStyle = "#f0ff00";
context3.fill();

//Create AnswerBox 4
var context4 = document.getElementById("canvas").getContext("2d");
context4.rect(500, 630, 800, 100);
context4.fillStyle = "#ff6600";
context4.fill();

//Create AnswerBox 5
var context5 = document.getElementById("canvas").getContext("2d");
context5.rect(500, 740, 800, 100);
context5.fillStyle = "#ec1a1a";
context5.fill();

这是否意味着画布只能使用一个fillStyle进行绘制，而我需要使用五个较小的画布才能拥有五个不同颜色的框？

Answer 1

  

这是否意味着画布只能用一个fillStyle绘制...... ???

nope，您可以根据需要设置/更改fillStyle，其中新值仅适用于您在该点绘制的对象....

不要从同一个画布创建上下文对象，而是重新使用它：

实施例

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(20, 20, 150, 100);
ctx.fillStyle = "#00FF00";
ctx.fillRect(30, 30, 30, 30);
ctx.fillStyle = "#0000FF";
ctx.fillRect(70, 70, 30, 30);

以下代码将生成具有不同样式的多个rects：