p5.js stroke()用法及代码示例

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

相关用法

注：本文由纯净天空筛选整理自jit_t大神的英文原创作品 p5.js | stroke() Function。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。