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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。