p5.js |中风()函数

stroke()函数用于在文本和形状周围绘制线条和边框。颜色对象可以根据颜色模式设置为 RGB 或 HSB。颜色对象也可以根据 RGB、RGBA、Hex CSS 颜色或命名颜色字符串。

句法：

stroke( v1, v2, v3, alpha )

或者

stroke( value )

或者

stroke( gray, alpha )

或者

stroke( values )

或者

stroke( color )

参数：

• v1：用于设置相对于当前颜色范围的红色或色调值。
• v2：用于设置相对于当前颜色范围的绿色或饱和度值。
• v3：用于设置相对于当前颜色范围的蓝色或亮度值。
• alpha：用于设置绘图的透明度。
• value：用于设置颜色字符串的值。
• gray：用于设置灰度值。
• values：它是一个包含红色、绿色、蓝色和 alpha 值的数组。
• color：用于设置描边颜色。

下面的例子说明了 p5.js 中的 stroke()函数：

示例 1：

function setup() { 
  
    // Create Canvas of given size 
    createCanvas(400, 200); 
} 
  
function draw() { 
      
    // Set the background color 
    background(220); 
      
    // Set the stroke width 
    strokeWeight(10); 
      
    // Set the stroke
    stroke('green');
    
    // Set the filled color 
    fill('white'); 
      
    // Draw the circle 
    circle(90, 90, 34); 
      
    // Set the text size 
    textSize(20); 
      
    // Set the text to print 
    text("GeeksForGeeks", 140, 100); 
}

输出：

示例 2：

function setup() { 
      
    // Create Canvas of given size 
    createCanvas(400, 200); 
} 
  
function draw() { 
      
    // Set the background color 
    background(220); 
      
    // Set the stroke clor 
    stroke('orange'); 
      
    // Set the stroke width to 10 
    strokeWeight(30); // Orange 
      
    // Draw a line 
    line(100, 50, 300, 50); 
      
    // Set the stroke color 
    stroke('white'); 
      
    // Set the stroke width to 8 
    strokeWeight(30); // White 
      
    // Draw a line 
    line(100, 100, 300, 100); 
      
    // Set stroke color 
    stroke('green'); 
      
    // Set the stroke width to 6 
    strokeWeight(30); // Green 
      
    // Draw a line 
    line(100, 150, 300, 150); 
} 

输出：

参考： https://p5js.org/reference/#/p5/stroke