p5.js入门教程之图片加载


Posted in Javascript onMarch 20, 2018

一、preload()函数与图片上传

preload()函数是一个特殊的函数,它同setup()类似,只在程序开始时运行一次,但顺序在setup()之前。

一般我们会将媒体文件(图片、声音)加载的语句放在preload()中,因为preload()有一个特性就是不加载完毕,程序就不会开始,保证了程序运行时不会出错。

在加载图片之前,我们需要先将图片文件上传。

方法是:

①点击编辑器左上角的小三角展开文件目录。

p5.js入门教程之图片加载

②点击文件目录右上角小三角,展开菜单后Add File。

p5.js入门教程之图片加载

③可以直接将图片文件拖到框里,会自动上传,传完后关闭即可,jpg和png格式均支持。

p5.js入门教程之图片加载

二、加载图片

接着,添加代码如下:

var img; 
function preload(){ 
 //加载图片文件 
 img=loadImage("HearthStone.png"); 
} 
 
function setup() {  
 createCanvas(400, 400); 
}  
 
function draw() {  
 background(220); 
 //坐标原点设为图片中心 
 imageMode(CENTER); 
 //绘制图片 
 image(img,200,200); 
}

其中有两个函数:

imageMode():设置图片中心,常用的有CENTER、CORNER,CENTER为中心,CORNER为左上角

image():绘制图片,image("图片地址",x,y)

效果图:

p5.js入门教程之图片加载

三、图片染色与拉伸

p5.js还提供了一些方便的功能,如染色与拉伸,代码如下:

var img; 
function preload(){ 
 //加载图片文件 
 img=loadImage("HearthStone.png"); 
} 
 
function setup() {  
 createCanvas(400, 400); 
}  
 
function draw() {  
 background(220); 
 //坐标原点设为图片中心 
 imageMode(CENTER); 
 //图片染色 
 tint(0,255,255); 
 //绘制图片,后两个参数调整长宽 
 image(img,200,200,150,150); 
}

tint():图片染色,括号内填入颜色,格式同fill()

image():第四、五个参数为图片长与宽,若不填的话则使用原图片长宽

效果图:

p5.js入门教程之图片加载

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery 学习笔记 选择器之四
Jul 23 Javascript
理解JavaScript中的对象 推荐
Jan 09 Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
Oct 19 Javascript
JS实现字符串转日期并比较大小实例分析
Dec 09 Javascript
AngularJS 单元测试(二)详解
Sep 21 Javascript
js常用DOM方法详解
Feb 04 Javascript
从零开始做一个pagination分页组件
Mar 15 Javascript
JS实现Cookie读、写、删除操作工具类示例
Aug 28 Javascript
详解React 服务端渲染方案完美的解决方案
Dec 14 Javascript
基于vue.js实现分页查询功能
Dec 29 Javascript
微信小程序实现翻牌抽奖动画
Sep 21 Javascript
react antd实现动态增减表单
Jun 03 Javascript
基于webpack.config.js 参数详解
Mar 20 #Javascript
JavaScript生成指定范围的时间列表
Mar 19 #Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
Mar 19 #Javascript
angularjs 缓存的使用详解
Mar 19 #Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
Mar 19 #Javascript
react-native-video实现视频全屏播放的方法
Mar 19 #Javascript
vue实现树形菜单效果
Mar 19 #Javascript
You might like
天津市收音机工业发展史
2021/03/04 无线电
PHP初学入门
2006/11/19 PHP
安装PHP可能遇到的问题“无法载入mysql扩展” 的解决方法
2007/04/16 PHP
用PHP实现维护文件代码
2007/06/14 PHP
PHP入门教程之上传文件实例详解
2016/09/11 PHP
php实现博客,论坛图片防盗链的方法
2016/10/15 PHP
php使用curl实现简单模拟提交表单功能
2017/05/15 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
PHP实现的数据对象映射模式详解
2019/03/20 PHP
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
2011/05/24 Javascript
jquery动态加载select下拉框示例代码
2013/12/10 Javascript
js清空表单数据的两种方式(遍历+reset)
2014/07/18 Javascript
JavaScript数值转换的三种方式总结
2014/07/31 Javascript
JavaScript基础函数整理汇总
2015/01/30 Javascript
jQuery表单验证功能实例
2015/08/28 Javascript
jquery.validate使用详解
2016/06/02 Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
2018/02/11 Javascript
JS实现点星星消除小游戏
2020/03/24 Javascript
vue中v-model对select的绑定操作
2020/08/31 Javascript
[06:07]刀塔密之二:攻之吾命受之吾幸
2014/07/03 DOTA
python opencv 图像尺寸变换方法
2018/04/02 Python
Python 中的参数传递、返回值、浅拷贝、深拷贝
2019/06/25 Python
python rsync服务器之间文件夹同步脚本
2019/08/29 Python
python实现QQ邮箱发送邮件
2020/03/06 Python
CSS3图片旋转特效(360/60/-360度)
2013/10/10 HTML / CSS
localstorage和sessionstorage使用记录(推荐)
2017/05/23 HTML / CSS
KENZO官网:高田贤三在法国创立的品牌
2019/05/16 全球购物
Tomcat的缺省是多少,怎么修改
2014/04/09 面试题
商场促销活动方案
2014/02/08 职场文书
文秘应聘自荐书范文
2014/02/18 职场文书
2014年医院党建工作总结
2014/12/20 职场文书
医院办公室主任岗位职责
2015/04/01 职场文书
2015小学教师年度工作总结
2015/05/12 职场文书
Linux7.6二进制安装Mysql8.0.27详细操作步骤
2021/11/27 MySQL
python中的getter与setter你了解吗
2022/03/24 Python
MySQL数据库配置信息查看与修改方法详解
2022/06/25 MySQL