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

一 概述

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

二 createImg语法介绍

2.1 语法

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

2.2 说明

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

2.3 参数及返回值

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

三 示例

3.1 本地图像

代码

function setup() {
  let img = createImg(
    'assets/fruit.png',
    '水果'
  );
  img.position(0, -10);
}

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

效果图

3.2 网络图像

代码

function setup() {

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

}

效果图

四 参考

• P5.js官方文档