Javascript 我想用不同颜色的矩形填充画布，为什么不'；不行？只有一种颜色

var c=document.getElementById（“myCan”）；
var color=[“红色”、“蓝色”、“橙色”、“绿色”、“黄色”、“栗色”、“黑色”、“棕色”]；
var-ctx=[]；
var i；
对于（i=0；i

您的浏览器不支持画布
这应该对您有所帮助。随后的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);
};

var c=document.getElementById（“myCan”）；
var color=[“红色”、“蓝色”、“橙色”、“绿色”、“黄色”、“栗色”、“黑色”、“棕色”]；
var-ctx=[]；
var i；
对于（i=0；i
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
var color=[“红色”、“蓝色”、“橙色”、“绿色”、“黄色”、“栗色”、“黑色”、“棕色”、“银色”、“巧克力色”]；
var i；
对于（i=0；i
对于相同的
div
，您不是一次又一次地重写
fillStyle
和
fillRect
吗。？这就是为什么它包含for循环中的最后一个值，
fillStyle
，即“brown”，类似的情况也适用于
fillRect
。
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);
    }
}