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
相關用法
- Node.js GM stroke()用法及代碼示例
- CSS stroke-miterlimit用法及代碼示例
- CSS stroke-dasharray用法及代碼示例
- CSS stroke-dashoffset用法及代碼示例
- CSS stroke-linecap用法及代碼示例
- CSS stroke-opacity用法及代碼示例
- CSS stroke-width用法及代碼示例
- CSS stroke-linejoin用法及代碼示例
- HTML canvas stroke()用法及代碼示例
- PHP dir()用法及代碼示例
- PHP min( )用法及代碼示例
- PHP max( )用法及代碼示例
注:本文由純淨天空篩選整理自jit_t大神的英文原創作品 p5.js | stroke() Function。非經特殊聲明,原始代碼版權歸原作者所有,本譯文未經允許或授權,請勿轉載或複製。