绘制在画布上的所有形状都需要指定一个坐标位置,单位:像素,数值:相对于原点的距离。
原点[0, 0]在乐述云享中并不是窗口左上角,而是文本显示位置的左上角。
若需要以窗口左上角作为原点,也是有方法的,我们会在后续教程中逐步开放给大家。
接下来让我们看一个案例:
function setup() {
// 制作一个 720 * 400 的画布。
createCanvas(720, 400);
}
function draw() {
// 将背景设置为黑色,关闭填色功能。
background(0);
noFill();
stroke(255);
// point() 函数的两个参数分别为指定的坐标。
// 第一个参数是 x 坐标,第二个参数是 y 坐标。
point(width * 0.5, height * 0.5);
point(width * 0.5, height * 0.25);
stroke(0, 153, 255);
// 坐标用于绘制所有形状,而不仅仅是点。
// 不同功能的参数用于不同的目的。例如,line() 的前两个参数指定第一个端点的坐标,后两个参数指定第二个端点的坐标。
line(0, height * 0.33, width, height * 0.33);
stroke(255, 153, 0);
// 默认情况下,rect() 的前两个参数是左上角的坐标,后两个参数是宽度和高度。
rect(width * 0.25, height * 0.1, width * 0.5, height * 0.8);
}
new p5();