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 相关文章推荐
cnblogs csdn 代码运行框实现代码
Nov 02 Javascript
基于jQuery的合并表格中相同文本的相邻单元格的代码
Apr 06 Javascript
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
Jun 06 Javascript
window.onresize 多次触发的解决方法
Nov 08 Javascript
Javascript变量作用域详解
Dec 06 Javascript
jquery.cookie.js使用指南
Jan 05 Javascript
javascript中的正则表达式使用指南
Mar 01 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
Aug 29 Javascript
jquery.validate表单验证插件使用方法解析
Nov 07 Javascript
微信小程序上传图片到服务器实例代码
Nov 07 Javascript
jquery无缝图片轮播组件封装
Nov 25 jQuery
JavaScript实现多球运动效果
Sep 07 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 zend解密软件绿色版测试可用
2008/04/14 PHP
用PHP进行MySQL删除记录操作代码
2008/06/07 PHP
php实现zip压缩文件解压缩代码分享(简单易懂)
2014/05/10 PHP
护卫神php套件 php版本升级方法(php5.5.24)
2015/05/10 PHP
PHP正则获取页面所有图片地址
2016/03/23 PHP
简单JS代码压缩器
2006/10/12 Javascript
同一页面多个商品倒计时JS 基于面向对象的javascript
2012/02/16 Javascript
JS子父窗口互相操作取值赋值的方法介绍
2013/05/11 Javascript
XMLHttpRequest处理xml格式的返回数据(示例代码)
2013/11/21 Javascript
Jquery网页内滑动缓冲导航的实现代码
2015/04/05 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
2015/06/19 Javascript
jquery调整表格行tr上下顺序实例讲解
2016/01/09 Javascript
在JavaScript中使用JSON数据
2016/02/15 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
2016/04/06 Javascript
Vue.js实现简单ToDoList 前期准备(一)
2016/12/01 Javascript
JQuery 选择器、DOM节点操作练习实例
2017/09/28 jQuery
分析JS单线程异步io回调的特性
2017/12/01 Javascript
CKEditor4配置与开发详细中文说明文档
2018/10/08 Javascript
微信小程序列表中item左滑删除功能
2018/11/07 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
2018/12/06 Javascript
javascript定时器的简单应用示例【控制方块移动】
2019/06/17 Javascript
javascript设计模式 ? 简单工厂模式原理与应用实例分析
2020/04/09 Javascript
Element Badge标记的使用方法
2020/07/27 Javascript
vue常用高阶函数及综合实例
2021/02/25 Vue.js
Python实现动态添加类的属性或成员函数的解决方法
2014/07/16 Python
Python的Flask框架中的Jinja2模板引擎学习教程
2016/06/30 Python
python3中set(集合)的语法总结分享
2017/03/24 Python
python的变量与赋值详细分析
2017/11/08 Python
Python3.5文件修改操作实例分析
2019/05/01 Python
python使用pandas抽样训练数据中某个类别实例
2020/02/28 Python
python实现猜单词游戏
2020/05/22 Python
Flask缓存静态文件的具体方法
2020/08/02 Python
python如何调用php文件中的函数详解
2020/12/29 Python
大专生自我评价
2014/01/28 职场文书
自荐信怎么写
2015/03/04 职场文书
2015年酒店客房部工作总结
2015/04/25 职场文书