我想用不同颜色的矩形填充画布，为什么不起作用？仅填充一种颜色

Question

 var c = document.getElementById("myCan"); var color = ['red', 'blue', 'orange', 'green', 'yellow', 'maroon', 'black', 'brown']; var ctx = []; var i; for(i = 0; i < color.length; i++){ ctx[i] = c.getContext("2d"); ctx[i].fillStyle = color[i]; }; ctx[0].fillRect(0, 0, 100, 150); ctx[1].fillRect(100, 0, 100, 150); ctx[2].fillRect(200, 0, 100, 150); ctx[3].fillRect(300, 0, 100, 150); ctx[4].fillRect(0, 150, 100, 150); ctx[5].fillRect(100, 150, 100, 150); ctx[6].fillRect(200, 150, 100, 150); ctx[7].fillRect(300, 150, 100, 150); 

 <canvas id="myCan" width="400px" height="300px" style="border:2px solid green"> Your browser does not support canvas </canvas> 

Answer 1

这应该可以帮助您链接。后续的getContext调用将返回相同的对象。也许下面的mod紧密符合您的要求

var c =               document.getElementById("myCan");
var color = ['red', 'blue', 'orange',  'green', 'yellow', 'maroon', 'black',  'brown'];
var ctx = [];
var i;
for(i = 0; i < color.length; i++){
   ctx[i] = c.getContext("2d");
   ctx[i].beginPath(); 
   ctx[i].fillStyle = color[i];
   if(i<4)ctx[i].fillRect(i*100, 0, 100, 150);
   if(i>=4)ctx[i].fillRect((i-4)*100, 150, 100, 150);
};

Answer 2

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var color = ['red', 'blue', 'orange', 'green', 'yellow', 'maroon', 'black', 'brown', 'silver', 'chocolate'];
var i;
for(i = 0; i < color.length; i++){
    ctx.fillStyle = color[i];
    if(i < color.length /2){
       ctx.fillRect(i*100,0,100, 200);
    }else{
       ctx.fillRect((i-5)*100, 200, 100, 200);
    }
}