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 相关文章推荐
两个listbox实现选项的添加删除和搜索
Mar 01 Javascript
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
Jun 05 Javascript
setTimeout()与setInterval()方法区别介绍
Dec 24 Javascript
Javascript四舍五入Math.round()与Math.pow()使用介绍
Dec 27 Javascript
JS实现自适应高度表单文本框的方法
Feb 25 Javascript
javascript鼠标滑动评分控件完整实例
May 13 Javascript
jQuery选择器基础入门教程
May 10 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
May 25 Javascript
使用vue编写一个点击数字计时小游戏
Aug 31 Javascript
angular6的table组件开发的实现示例
Dec 26 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
Apr 25 Javascript
js+canvas实现纸牌游戏
Mar 16 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
PHP安装攻略:常见问题解答(一)
2006/10/09 PHP
smarty表格换行实例
2014/12/15 PHP
使用正则去除php代码中的注释方法
2016/11/03 PHP
php如何比较两个浮点数是否相等详解
2019/02/12 PHP
PHP hebrev()函数用法讲解
2019/02/21 PHP
PHP+百度AI OCR文字识别实现了图片的文字识别功能
2019/05/08 PHP
php设计模式之迭代器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
深入浅析JavaScript中的Function类型
2016/07/09 Javascript
AngularJS入门之动画
2016/07/27 Javascript
使用javaScript实现鼠标拖拽事件
2020/04/03 Javascript
js 显示日期时间的实例(时间过一秒加1)
2017/10/25 Javascript
微信小程序学习笔记之本地数据缓存功能详解
2019/03/29 Javascript
微信小程序tabBar 返回tabBar不刷新页面
2019/07/25 Javascript
uni app仿微信顶部导航条功能
2019/09/17 Javascript
javascript如何实现create方法
2019/11/04 Javascript
js获取本日、本周、本月的时间代码
2020/02/01 Javascript
详解Vue.js 响应接口
2020/07/04 Javascript
python动态加载包的方法小结
2016/04/18 Python
python验证码识别的示例代码
2017/09/21 Python
python 提取tuple类型值中json格式的key值方法
2018/12/31 Python
Django 实现图片上传和显示过程详解
2019/07/18 Python
python神经网络编程实现手写数字识别
2020/05/27 Python
为2021年的第一场雪锦上添花:用matplotlib绘制雪花和雪景
2021/01/05 Python
StubHub智利:购买和出售您的门票
2016/11/23 全球购物
美国汽车轮胎和轮毂销售网站:Tire Rack
2018/01/11 全球购物
Currentbody美国/加拿大:美容仪专家
2020/03/09 全球购物
统计员岗位职责
2013/11/14 职场文书
化学实验员岗位职责
2013/12/28 职场文书
黄继光的英雄事迹材料
2014/02/13 职场文书
党的群众路线教育实践活动学习心得体会
2014/03/03 职场文书
父母寄语大全
2014/04/12 职场文书
计划生育宣传标语
2014/06/21 职场文书
关于读书的演讲稿500字
2014/08/27 职场文书
虎兄虎弟观后感
2015/06/12 职场文书
2016暑期师德培训心得体会
2016/01/09 职场文书
如何用Laravel包含你自己的帮助函数
2021/05/27 PHP