p5.js curve()用法及代碼示例

curve()函數用於在屏幕的中間四個參數中給定的兩個點之間繪製一條曲線。前兩個參數和後兩個參數用作控製點。

用法:

curve( x1, y1, x2, y2, x3, y3, x4, y4 )

或者

curve( x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4 )

參數：

值	描述
x1	用於保存起始控製點的x坐標。
11	用於保存起始控製點的y坐標。
11	用於保存起始控製點的z坐標。
2倍	用於保存第一個點的x坐標。
22	用於保存第一個點的y坐標。
22	用於保存第一個點的z坐標。
3倍	用於保持第二點的x坐標。
33	用於保存第二點的y坐標。
33	用於保持第二點的z坐標。
4倍	用於保存終點控製點的x坐標。
44	用於保存終點控製點的y坐標。
44	用於保存終點控製點的z坐標。

以下示例說明了CSS中的curve()函數：

範例1：

function setup() {  
    
    // Create canvas of given size 
    createCanvas(500, 300);  
    
    // Set the background of canvas 
    background('green');  
}  
  
function draw() {  
      
    // Use noFill() function to not fill the color 
    noFill(); 
    
    // Set the stroke color 
    stroke('white'); 
    
    // Use curve() function to create curve 
    curve(50, 50, 400, 50, 50, 250, 50, 50); 
  
    // Set the stroke color 
    stroke('blue'); 
    
    // Use curve() function to create curve 
    curve(400, 50, 50, 250, 50, 50, 50, 50);  
}

輸出：

範例2：

function setup() {  
    
    // Create canvas of given size 
    createCanvas(500, 300);  
    
    // Set the background of canvas 
    background('green');  
}  
  
function draw() {  
      
    // Use noFill() function to not fill the color 
    noFill(); 
    
    // Set the stroke color 
    stroke('white'); 
    
    // Use curve() function to create curve 
    curve(50, 50, 50, 200, 50, 10, 50, 250, 150, 50, 50, 50); 
  
    // Set the stroke color 
    stroke('blue'); 
    
    // Use curve() function to create curve 
    curve(50, 200, 450, 50, 250, 100, 350, 250, 250, 450, 450, 400);  
}

輸出：

在線編輯：
環境設置：

相關用法

注：本文由純淨天空篩選整理自jit_t大神的英文原創作品 p5.js | curve() function。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。