p5.js入门学习-加载图片与显示图片

228 阅读1分钟

图像可以以原图大小或自定义大小被加载和显示。

语法:

在开始本案例之前,请先找一张图片,然后上传至图床。在编辑器中你会获得该图片的图床链接。

// 声明变量 'img'
let img;
function setup() {
  // 画布:720 * 400
  createCanvas(720, 400);
  // 加载图像,并将图片保存在全局变量img中
  img = loadImage('图床链接'); 
}
function draw() {
  // 在坐标(0, 0),显示原图大小的图像 
  image(img, 0, 0);
  // 在坐标(0, 高度/2),显示一半原图大小的图像
  image(img, 0, height / 2, img.width / 2, img.height / 2);
}
new p5();

p5js 开源社区 - 乐述云享 (aleshu.com)