p5.js resetMatrix()函数
resetMatrix()函数用于将当前矩阵替换为单位矩阵(除对角线为 1 外,所有值均为零的方阵)。当我们使用applyMatrix()旋转、平移和缩放任何图形图像时,然后通过应用函数resetMatrix()我们可以将图形更改为其原始形式。
句法:
resetMatrix()
以下是说明 resetMatrix()函数的示例。
第 1 步:打开在线网页编辑器https://editor.p5js.org/。
第 2 步:编写以下代码并运行以查看输出。
示例 1:
Javascript
// Set up the function
function setup() {
// Create canvas
createCanvas(800, 400);
}
function draw() {
// Set the background colour
background(200);
// Set the translate function
translate(500, 50);
// Set the apply matrix function
applyMatrix(0.5, 0.5, -0.5, 0.5, 0, 0);
// Set the colour to fill the graphics
fill('red');
// Set the shape.
rect(50, 50, 300, 200, 30);
// Now call the reset function
resetMatrix();
// Set the colour to fill the graphics
fill('green');
// Set the shape
rect(50, 50, 300, 200, 30);
}
Javascript
// Set up the function
function setup() {
// Create canvas
createCanvas(800, 600);
}
function draw() {
// Set the function to rotate
let step = frameCount % 50;
let angle = map(step, 10, 60, 0, PI);
let cos_a = cos(angle);
let sin_a = sin(angle);
// Set the background color
background(200);
// Set the translate function
translate(500, 50);
// Set the apply matrix function
applyMatrix(cos_a, sin_a, -sin_a, -cos_a, 0, 0);
// Set the colour to fill the graphics
fill('red');
// Set the shape
rect(50, 50, 300, 200, 30);
// Now call the reset function
resetMatrix();
// Set the colour to fill the graphics
fill('green');
// Set the shape
rect(50, 50, 300, 200, 30);
}
输出:
示例 2:
Javascript
// Set up the function
function setup() {
// Create canvas
createCanvas(800, 600);
}
function draw() {
// Set the function to rotate
let step = frameCount % 50;
let angle = map(step, 10, 60, 0, PI);
let cos_a = cos(angle);
let sin_a = sin(angle);
// Set the background color
background(200);
// Set the translate function
translate(500, 50);
// Set the apply matrix function
applyMatrix(cos_a, sin_a, -sin_a, -cos_a, 0, 0);
// Set the colour to fill the graphics
fill('red');
// Set the shape
rect(50, 50, 300, 200, 30);
// Now call the reset function
resetMatrix();
// Set the colour to fill the graphics
fill('green');
// Set the shape
rect(50, 50, 300, 200, 30);
}
输出: