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 相关文章推荐
js no-repeat写法 背景不重复
Mar 18 Javascript
使用GruntJS链接与压缩多个JavaScript文件过程详解
Aug 02 Javascript
JavaScript的面向对象编程基础
Aug 13 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
Apr 28 Javascript
详解JavaScript中this关键字的用法
May 26 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
Aug 11 Javascript
EasyUI学习之Combobox级联下拉列表(2)
Dec 29 Javascript
Require.js的基本用法详解
Jul 03 Javascript
基于JS脚本语言的基础语法详解
Jul 22 Javascript
AngularJS中scope的绑定策略实例分析
Oct 30 Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
Aug 12 Javascript
javascript将扁平的数据转为树形结构的高效率算法
Feb 27 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
如何将数据从文本导入到mysql
2006/10/09 PHP
php 显示指定路径下的图片
2009/10/29 PHP
javascript 小型动画组件与实现代码
2010/06/02 PHP
destoon网站转移服务器后搜索汉字出现乱码的解决方法
2014/06/21 PHP
phpcms手机内容页面添加上一篇和下一篇
2015/06/05 PHP
CodeIgniter多语言实现方法详解
2016/01/20 PHP
php进行ip地址掩码运算处理的方法
2016/07/11 PHP
php封装的图片(缩略图)处理类完整实例
2016/10/19 PHP
php实现的mysqldb读写分离操作类示例
2017/02/07 PHP
PHP进阶学习之命名空间基本用法分析
2019/06/18 PHP
php7下的filesize函数
2019/09/30 PHP
教你如何解密js/vbs/vbscript加密的编码异处理小结
2008/06/25 Javascript
js动态生成指定行数的表格
2013/07/11 Javascript
javascript垃圾收集机制与内存泄漏详细解析
2013/11/11 Javascript
代码分析jQuery四种静态方法使用
2015/07/23 Javascript
jQuery-mobile事件监听与用法详解
2016/11/23 Javascript
React 高阶组件入门介绍
2018/01/11 Javascript
微信小程序canvas实现签名功能
2021/01/19 Javascript
使用python Django做网页
2013/11/04 Python
python实现随机调用一个浏览器打开网页
2018/04/21 Python
在python 不同时区之间的差值与转换方法
2019/01/14 Python
Python实现微信消息防撤回功能的实例代码
2019/04/29 Python
Python安装与基本数据类型教程详解
2019/05/29 Python
Python实现RGB与HSI颜色空间的互换方式
2019/11/27 Python
python IDLE添加行号显示教程
2020/04/25 Python
Python如何设置指定窗口为前台活动窗口
2020/08/12 Python
自定义Django_rest_framework_jwt登陆错误返回的解决
2020/10/18 Python
GitHub上值得推荐的8个python 项目
2020/10/30 Python
韩国保养品、日本药妆购物网:小三美日
2018/12/30 全球购物
英国伦敦的睡衣品牌:Asceno
2019/10/06 全球购物
大学生职业规划范文:象牙塔生活的四年计划
2014/01/14 职场文书
校园安全广播稿
2014/02/08 职场文书
道德模范先进事迹
2014/02/14 职场文书
“四风”问题整改措施和努力方向
2014/09/20 职场文书
支行行长竞聘报告
2014/11/06 职场文书
小人国观后感
2015/06/11 职场文书