文章目录
画布创建
在setup()
函数中进行画布的创建:createCanvas(x, y);
x:创建画布的宽度
y:创建画布的高度
如果不显示的创建画布时,默认创建一个100*100像素的画布。
background(color)
用于设置画布的背景颜色。
eg:
function setup() {
// 设置程序初始状态的代码(画布大小、刷新频率、色彩模式)
// 创建画布
createCanvas(600, 600);
background(200)
}
图像绘制
基本形状
绘制点
在draw()
函数中进行直线的绘制 point(x, y)
:
(x,y)参数时绘制点的坐标.
画布的左上角默认为坐标原点(0,0)
绘制直线
在draw()
函数中进行直线的绘制 line(x1,y1,x2,y2)
:
(x1,y1):直线起点的坐标
(x2,y2):直线终点的坐标
画布的左上角默认为坐标原点(0,0)
简单线条
eg:以(50,50)为起点,鼠标位置为终点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
width="device-width,"
initial-scale="1.0,"
maximum-scale="1.0,"
user-scalable="0"
/>
<style>
body {
padding: 0;
margin: 0;
}
</style>
<script src="../p5/p5.min.js"></script>
<script src="../p5/addons/p5.dom.min.js"></script>
<script src="../p5/addons/p5.sound.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.min.js"></script> -->
<!-- <script src="sketch.js"></script> -->
</head>
<body>
<script>
function setup() {
// 设置程序初始状态的代码(画布大小、刷新频率、色彩模式)
//默认创建100*100的画布
}
function draw() {
// 图形绘制的功能代码(色彩填充、绘制图像)
// 画布背景颜色
background(200);
// 直线(起点是(50,50)的位置,默认画布的左上角是原点; 终点是鼠标的位置)
line(50, 50, mouseX, mouseY);
}
</script>
</body>
</html>
三角形
在draw()
函数中进行直线的绘制 triangle(x1,y1,x2,y2,x3,y3);
:
x1,y1,x2,y2,x3,y3分别代表三个点的坐标,逆时针依次连接三个点。
eg:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
width="device-width,"
initial-scale="1.0,"
maximum-scale="1.0,"
user-scalable="0"
/>
<style>
body {
padding: 0;
margin: 0;
}
</style>
<script src="../p5/p5.min.js"></script>
<script src="../p5/addons/p5.dom.min.js"></script>
<script src="../p5/addons/p5.sound.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.min.js"></script> -->
<!-- <script src="sketch.js"></script> -->
</head>
<body>
<script>
function setup() {
// 设置程序初始状态的代码(画布大小、刷新频率、色彩模式)
// 创建画布
createCanvas(600, 600);
background(200);
}
function draw() {
// 图形绘制的功能代码(色彩填充、绘制图像)
// 绘制点
// point(100, 100);
// 直线
// line(200, 200, 300, 300);
// 三角形(逆时针连接点)
triangle(80, 95, 200, 220, 360, 120);
}
</script>
</body>
</html>
四边形
quad(x1,y1,x2,y2,x3,y3,x4,y4)
8个参数对应的是四边形的四个顶点,(x1,y1)对应左上角的顶点其他三个点顺时针
依次对应其余三个点。
eg:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
width="device-width,"
initial-scale="1.0,"
maximum-scale="1.0,"
user-scalable="0"
/>
<style>
body {
padding: 0;
margin: 0;
}
</style>
<script src="../p5.js"></script>
<script src="../addons/p5.dom.min.js"></script>
<script src="../addons/p5.sound.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.min.js"></script> -->
<!-- <script src="sketch.js"></script> -->
</head>
<body>
<script>
function setup() {
// 设置程序初始状态的代码(画布大小、刷新频率、色彩模式)
// 创建画布
createCanvas(600, 600);
background(200);
}
function draw() {
// 图形绘制的功能代码(色彩填充、绘制图像)
// 绘制点
// point(100, 100);
// 直线
// line(200, 200, 300, 300);
// 三角形(逆时针连接点)
triangle(80, 95, 200, 220, 360, 120);
// 四边形(顺时针连接点)
quad(80, 95, 200, 220, 235, 420, 115, 300);
quad(200, 220, 360, 120, 380, 300, 235, 420);
}
</script>
</body>
</html>
矩形
rect(x,y, width,height)
, (x,y)代表左上角的顶点,widh:代表矩形的宽度,height代表举行的高度。在draw函数中进行编写。
在setup()
中编写rectMode(CENTER)
,则rect(x,y, width,height)
中的(x,y)
表示的就是矩形的中心点的位置。
椭圆
ellipse(x,y,width,height)
, (x,y)
表示椭圆的圆心,width代表椭圆的宽度直径,height代表椭圆的高度直径。
eg:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
width="device-width,"
initial-scale="1.0,"
maximum-scale="1.0,"
user-scalable="0"
/>
<style>
body {
padding: 0;
margin: 0;
}
</style>
<script src="../p5.js"></script>
<script src="../addons/p5.dom.min.js"></script>
<script src="../addons/p5.sound.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.min.js"></script> -->
<!-- <script src="sketch.js"></script> -->
</head>
<body>
<script>
function setup() {
// 设置程序初始状态的代码(画布大小、刷新频率、色彩模式)
// 创建画布
createCanvas(600, 600);
background(200);
}
function draw() {
ellipse(200, 200, 200, 100);
}
</script>
</body>
</html>
圆弧
arc(x,y,width,height, start, stop)
用于绘制圆弧形。
arc函数共有6个参数,前4个的作用与椭圆一样,用于确定圆弧的圆心位置和宽、高直径。start
参数决定圆弧的起始角度,stop
参数是圆弧的结束角度。(逆时针)
start
和 stop
是用 弧度 表示,取值是从 0 到 6.28。
p5.js给常用的4个弧度值赋予了特殊的名称:QUARTER_PI
、HALF_PI
、PI
和TWO_PI
分别代表45°、90°、180°和 360°的弧度值。
使用radians(angle)
函数可以将角度转换弧度制。
eg:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
width="device-width,"
initial-scale="1.0,"
maximum-scale="1.0,"
user-scalable="0"
/>
<style>
body {
padding: 0;
margin: 0;
}
</style>
<script src="../p5.js"></script>
<script src="../addons/p5.dom.min.js"></script>
<script src="../addons/p5.sound.min.js"></script>
</head>
<body>
<script>
function setup() {
createCanvas(600, 600);
background(200);
}
function draw() {
arc(200, 200, 200, 100, 0, 3.14);
}
</script>
</body>
</html>
效果:
贝塞尔曲线
贝塞尔曲线函数 bezier (x1,y1,cx1,cy1,cx2,cy2,x2,y2)
包含8个参数。
(x1,y1)
与(x2,y2)
定义起点和终点坐标, (cx1,cy1)
与(cx2,cy2)
定义两个控制点。
eg:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
width="device-width,"
initial-scale="1.0,"
maximum-scale="1.0,"
user-scalable="0"
/>
<style>
body {
padding: 0;
margin: 0;
}
</style>
<script src="../p5.js"></script>
<script src="../addons/p5.dom.min.js"></script>
<script src="../addons/p5.sound.min.js"></script>
</head>
<body>
<script>
function setup() {
createCanvas(600, 600);
background(200);
}
function draw() {
bezier(100, 200, 120, 10, 300, 10, 400, 200);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
width="device-width,"
initial-scale="1.0,"
maximum-scale="1.0,"
user-scalable="0"
/>
<style>
body {
padding: 0;
margin: 0;
}
</style>
<script src="../p5.js"></script>
<script src="../addons/p5.dom.min.js"></script>
<script src="../addons/p5.sound.min.js"></script>
</head>
<body>
<script>
function setup() {
createCanvas(600, 600);
background(200);
}
function draw() {
noFill();
bezier(50, 200, 250, 300, 90, 50, 220, 90);
}
</script>
</body>
</html>
自定义形状
beginShape、endShape、vertex
beginShape()
函数表示开始创建自定义图形
vertex(x,y)
函数定义这个形状中每个顶点的坐标
endShape()
函数表示形状已经完成
eg:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
width="device-width,"
initial-scale="1.0,"
maximum-scale="1.0,"
user-scalable="0"
/>
<style>
body {
padding: 0;
margin: 0;
}
</style>
<script src="../p5.js"></script>
<script src="../addons/p5.dom.min.js"></script>
<script src="../addons/p5.sound.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.min.js"></script> -->
<!-- <script src="sketch.js"></script> -->
</head>
<body>
<script>
function setup() {
// 设置程序初始状态的代码(画布大小、刷新频率、色彩模式)
// 创建画布
createCanvas(600, 600);
background(200);
// rectMode(CENTER);
}
function draw() {
// 自定义图形绘制开始
beginShape();
vertex(115, 18);
vertex(125, 50);
vertex(180, 60);
vertex(135, 80);
vertex(140, 120);
vertex(90, 90);
vertex(40, 110);
vertex(60, 75);
vertex(20, 50);
vertex(80, 45);
vertex(115, 18);
endShape();
}
</script>
</body>
</html>
闭合形状
使用vertex(x,y)
定义的点会依次连接,但不会自动闭合,使用 endShape(CLOSE)
可以实现自动闭合。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
width="device-width,"
initial-scale="1.0,"
maximum-scale="1.0,"
user-scalable="0"
/>
<style>
body {
padding: 0;
margin: 0;
}
</style>
<script src="../p5.js"></script>
<script src="../addons/p5.dom.min.js"></script>
<script src="../addons/p5.sound.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.min.js"></script> -->
<!-- <script src="sketch.js"></script> -->
</head>
<body>
<script>
function setup() {
// 设置程序初始状态的代码(画布大小、刷新频率、色彩模式)
// 创建画布
createCanvas(600, 600);
background(200);
// rectMode(CENTER);
}
function draw() {
// 自定义图形绘制开始
beginShape();
vertex(115, 18);
vertex(125, 50);
vertex(180, 60);
vertex(135, 80);
vertex(140, 120);
vertex(90, 90);
vertex(40, 110);
vertex(60, 75);
vertex(20, 50);
vertex(80, 45);
// vertex(115, 18);
endShape(CLOSE);
}
</script>
</body>
</html>
两只小动物
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
width="device-width,"
initial-scale="1.0,"
maximum-scale="1.0,"
user-scalable="0"
/>
<style>
body {
padding: 0;
margin: 0;
}
</style>
<script src="../p5.js"></script>
<script src="../addons/p5.dom.min.js"></script>
<script src="../addons/p5.sound.min.js"></script>
</head>
<body>
<script>
function setup() {
createCanvas(500, 150);
background(0);
}
function draw() {
// 左边小动物
fill(255);
beginShape();
vertex(125, 150);
vertex(129, 100);
vertex(110, 90);
vertex(115, 80);
vertex(130, 85);
vertex(140, 10);
vertex(147, 30);
vertex(183, 32);
vertex(190, 12);
vertex(195, 90);
vertex(210, 100);
vertex(205, 110);
vertex(195, 105);
vertex(200, 150);
endShape();
fill(0);
ellipse(153, 60, 6, 6);
ellipse(176, 60, 6, 6);
noFill();
ellipse(164, 90, 10, 20);
// 右边小动物
fill(255);
beginShape();
vertex(270, 150);
vertex(270, 114);
vertex(258, 110);
vertex(260, 104);
vertex(270, 105);
vertex(270, 60);
vertex(260, 50);
vertex(270, 55);
vertex(300, 55);
vertex(320, 45);
vertex(310, 55);
vertex(320, 105);
vertex(320, 105);
vertex(330, 100);
vertex(335, 105);
vertex(323, 113);
vertex(325, 150);
endShape();
fill(0);
ellipse(280, 80, 3, 7);
ellipse(290, 80, 3, 7);
noFill();
arc(285, 90, 20, 20, radians(20), radians(90));
}
</script>
</body>
</html>
文字绘画
使用textFont(字体类型)
函数可以设置绘制文字的字体
使用textSize(字体大小)
函数可以设置绘文字的字号
最后使用text(文字内容, x, y)
函数将文字呈现在画布上。(x,y) 表示图形开始绘制的位置。
eg:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
width="device-width,"
initial-scale="1.0,"
maximum-scale="1.0,"
user-scalable="0"
/>
<style>
body {
padding: 0;
margin: 0;
}
</style>
<script src="../p5.js"></script>
<script src="../addons/p5.dom.min.js"></script>
<script src="../addons/p5.sound.min.js"></script>
</head>
<body>
<script>
function setup() {
createCanvas(500, 150);
// 字体
textFont("Arial");
}
function draw() {
background(120);
// 字体大小
textSize(32);
text("Hello>>>", 25, 60);
textSize(16);
text("yang", 27, 90);
}
</script>
</body>
</html>
事件
mouseIsPressed鼠标点击事件
使用方法
if (mouseIsPressed) {
//鼠标点击之后所要执行的事件
} else {
// 未点击时执行的事件
}