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 插件开发笔记整理
Jan 17 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
Aug 11 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
Apr 13 Javascript
微信小程序组件 marquee实例详解
Jun 23 Javascript
修改UA在PC中访问只能在微信中打开的链接方法
Nov 27 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
Feb 23 Javascript
深入理解Vue 的钩子函数
Sep 05 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
Oct 26 Javascript
vue中上传视频或图片或图片和文字一起到后端的解决方法
Dec 01 Javascript
微信小程序自定义tabBar的踩坑实践记录
Nov 06 Javascript
vue 插槽简介及使用示例
Nov 19 Vue.js
vue实现水波涟漪效果的点击反馈指令
May 31 Vue.js
基于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
python进程与线程小结实例分析
2018/11/11 PHP
基于php+MySql实现学生信息管理系统实例
2020/08/04 PHP
漂亮的提示信息(带箭头)
2007/03/21 Javascript
用cookies实现的可记忆的样式切换效果代码下载
2007/12/24 Javascript
jQuery 获取URL参数的插件
2010/03/04 Javascript
使用jQuery动态加载js脚本文件的方法
2014/04/03 Javascript
javascript 中的 delete及delete运算符
2015/11/15 Javascript
快速学习jQuery插件 Form表单插件使用方法
2015/12/01 Javascript
jquery对dom节点的操作【推荐】
2016/04/15 Javascript
VUEJS实战之构建基础并渲染出列表(1)
2016/06/13 Javascript
jQuery下拉框的简单应用
2016/06/24 Javascript
Vuejs第十篇之vuejs父子组件通信
2016/09/06 Javascript
Bootstrap CSS组件之大屏幕展播
2016/12/17 Javascript
Echarts动态加载多条折线图的实现代码
2019/05/24 Javascript
js HTML DOM EventListener功能与用法实例分析
2020/04/27 Javascript
基于js实现判断浏览器类型代码实例
2020/07/17 Javascript
JavaScript中展开运算符及应用的实例代码
2021/01/14 Javascript
Python实现多线程HTTP下载器示例
2017/02/11 Python
Python探索之自定义实现线程池
2017/10/27 Python
Pycharm设置utf-8自动显示方法
2019/01/17 Python
如何利用Anaconda配置简单的Python环境
2019/06/24 Python
Python中使用双下划线防止类属性被覆盖问题
2019/06/27 Python
Python操作列表常用方法实例小结【创建、遍历、统计、切片等】
2019/10/25 Python
python实现二分类的卡方分箱示例
2019/11/22 Python
python3实现网页版raspberry pi(树莓派)小车控制
2020/02/12 Python
利用Tensorboard绘制网络识别准确率和loss曲线实例
2020/02/15 Python
大学毕业生自荐书怎么写?
2014/01/06 职场文书
公司任命书模板
2014/06/06 职场文书
学位证书委托书
2014/09/30 职场文书
卖房授权委托书样本
2014/10/05 职场文书
百年孤独读书笔记
2015/06/29 职场文书
钓鱼岛事件感想
2015/08/11 职场文书
CSS3 制作的图片滚动效果
2021/04/14 HTML / CSS
Java框架入门之简单介绍SpringBoot框架
2021/06/18 Java/Android
“鬼灭之刃”热度不减,其成功背后的原因是什么?
2022/03/22 日漫
Win11控制面板快捷键是什么?Win11打开控制面板的方法汇总
2022/07/07 数码科技