为什么会出现白框?

时间:2019-06-02 18:12:07

标签: javascript loops colors processing p5.js

循环输出的第一个框是带有黑色轮廓的白框。我不知道它从哪里来... https://editor.p5js.org/matranson/present/6fNelJM8_

function setup() {
    colorMode(HSB,360,100,100);
    createCanvas(400, 400);
    var boxh = height / 10;
    var boxw = width;
    for(var i = 0; i < 10; i++) {
    var h = lerp(64, 22, i / 9);
    var s = lerp(86, 90, i / 9);
    var l = lerp(96, 56, i / 9);
    rect(0, i * boxh, boxw, boxh);
    fill(h,s,l);   
    stroke(0,0,100);
    }
    
}

function draw() {
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>

1 个答案:

答案 0 :(得分:1)

stroke()设置用于绘制线条和边框的颜色。 fill()设置用于填充形状的颜色。 rect()绘制一个矩形。
在绘制矩形之前必须设置笔触和填充颜色:

fill(h,s,l);   
stroke(0,0,100); 
rect(0, i * boxh, boxw, boxh); 

function setup() {
    colorMode(HSB,360,100,100);
    createCanvas(400, 400);
    var boxh = height / 10;
    var boxw = width;
    for(var i = 0; i < 10; i++) {
      var h = lerp(64, 22, i / 9);
      var s = lerp(86, 90, i / 9);
      var l = lerp(96, 56, i / 9);
    
      fill(h,s,l);   
      stroke(0,0,100); 
      rect(0, i * boxh, boxw, boxh);
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>