P5.js开发之——通过createImg向页面中添加图像

发表于 分类于 ， ， 阅读时长 ≈ 1 分钟

一 概述

  • createImg语法介绍
  • 示例—添加本地图形和网络图像

二 createImg语法介绍

2.1 语法

1
createImg(src, alt, crossOrigin, [successCallback])

2.2 说明

  • 添加图像(本地图像和网络图像)
  • 可以级联使用p5.Element的语法

2.3 参数及返回值

参数 说明
src 图片路径
alt 指定图像不能正常显示后显示的替换文本
crossOrigin 跨域访问图像
successCallback 图片成功加载回调

三 示例

3.1 本地图像

代码

1
2
3
4
5
6
7
function setup() {
  let img = createImg(
    'assets/fruit.png',
    '水果'
  );
  img.position(0, -10);
}

说明：图片位于跟index.html同一目录下

效果图

3.2 网络图像

代码

1
2
3
4
5
6
7
8
9
function setup() {

  let img = createImg(
    'https://p5js.org/assets/img/asterisk-01.png',
    '官方图片地址'
  )
  .position(100, 100);

}

效果图

四 参考

  • P5.js官方文档