p5.js |排版 | sherX()函数

p5.js 中的shearX()函数用于围绕x 轴剪切形状或对象。对象按角度参数指定的量进行剪切。为了使角度正常运行，应在当前的角度模式中指定。对象总是围绕它们与原点的相对位置沿顺时针方向剪切。

句法：

shearX(angle)

参数：此函数接受存储角度值的单个参数角度。

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

示例 1：本示例使用shearX()函数在 x 轴上剪切对象。

function setup() {
  
    // Create Canvas of given size
    createCanvas(780, 650);
}
  
function draw() {
      
    // Set the background color
    background(220);
      
    // Set fill color
    fill('lightgreen');
      
    // Set stroke width
    strokeWeight(5);
      
    // Set shearX function
    shearX(PI/6);
      
    // Finally Draw the sheared rectangle
    rect(30, 30, 400, 300);
}

输出：

例2：本例使用shearX()函数在x 轴上剪切对象。

function setup() {
      
    // Create Canvas of given size
    createCanvas(780, 650);
}
  
function draw() {
      
    // Set the background color
    background(220);
      
    // Set fill color
    fill('green');
  
    // Set stroke width
    strokeWeight(5);
      
    // Set shearX function
    shearX(PI/20);
      
    // Finally Draw the sheared
    // circle of radius 80 
    circle(height/2, width/2, 80);
}

输出：

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