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

p5.js中的translate()函数用于指定在显示窗口内放置对象的数量。 x参数用于指定左/右平移，y参数用于指定上/下平移。

用法:

translate(x, y, [z])

或者

translate(vector)

参数：此函数接受上述和以下所述的三个参数：

x:此参数存储左/右平移的值。
y:此参数存储上/下转换的值。
z:此参数存储前进/后退转换的值。

用另一种语法，我们只能提供p5向量对象。

以下程序说明了p5.js中的translate()函数：

范例1：本示例使用translate()函数来指定要放置对象的数量。

function setup() { 
      
    // Create Canvas of given size 
    createCanvas(580, 450); 
} 
  
function draw() { 
      
    // Set the background color 
    background(220); 
      
    // Fill the color 
    fill('lightgreen'); 
      
    // Set the border weight 
    strokeWeight(5); 
      
    // Create rectangle 
    rect(10, 10, 400, 300); 
      
    // Translate the rectangle 
    translate(30, 30); 
      
    // Create rectangle 
    rect(10, 10, 400, 300); 
      
    // Translate the rectangle 
    translate(30, 30); 
      
    // Create rectangle 
    rect(10, 10, 400, 300); 
}

输出：

范例2：本示例使用translate()函数指定在显示窗口内放置对象的数量。

function setup() { 
      
    // Create Canvas of given size 
    createCanvas(580, 450); 
} 
  
function draw() { 
      
    // Set the background color 
    background(220); 
      
    for(var i=0, j=255; i<255, j>0; i++, j--) { 
        fill(i, j, i); 
    } 
      
    // Set the stroke weight 
    strokeWeight(5); 
      
    // Use translate function 
    translate(width / 2, height / 2); 
      
    translate(p5.Vector.fromAngle(millis() / 1000, 200)); 
      
    // Create rectangle 
    rect(10, 10, 40, 30); 
}

输出：

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

相关用法

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