文章目录

画布创建
图像绘制
事件
- mouseIsPressed鼠标点击事件

画布创建

在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>

在这里插入图片描述

事件

mouseIsPressed鼠标点击事件

使用方法

 if (mouseIsPressed) {
    
    
   //鼠标点击之后所要执行的事件
  } else {
    
    
   // 未点击时执行的事件
  }

P5——绘制图像

文章目录

画布创建

图像绘制

基本形状

绘制点

绘制直线

简单线条

三角形

四边形

矩形

椭圆

圆弧

贝塞尔曲线

自定义形状

beginShape、endShape、vertex

闭合形状

两只小动物

事件

mouseIsPressed鼠标点击事件

猜你喜欢