p5.js入门教程之图片加载
更新时间：2018年03月20日 08:34:14 作者：西河某人
这篇文章主要介绍了p5.js入门教程之图片加载,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
一、preload()函数与图片上传
preload()函数是一个特殊的函数，它同setup()类似，只在程序开始时运行一次，但顺序在setup()之前。
一般我们会将媒体文件（图片、声音）加载的语句放在preload()中，因为preload()有一个特性就是不加载完毕，程序就不会开始，保证了程序运行时不会出错。
在加载图片之前，我们需要先将图片文件上传。
方法是：
①点击编辑器左上角的小三角展开文件目录。
②点击文件目录右上角小三角，展开菜单后Add File。
③可以直接将图片文件拖到框里，会自动上传，传完后关闭即可，jpg和png格式均支持。
二、加载图片
接着，添加代码如下：
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还提供了一些方便的功能，如染色与拉伸，代码如下：
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()：第四、五个参数为图片长与宽，若不填的话则使用原图片长宽
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了微信小程序的授权实现过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-08-08
这篇文章主要为大家详细介绍了如何使用JavaScript实现多行文本溢出省略号的样式,文中的示例代码讲解详细,有需要的小伙伴可以参考一下2024-03-03
这篇文章主要为大家详细介绍了基于three.js实现简易照片墙效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
列举所有的方式，看看各浏览器的支持差异。方便用js动态设置元素css的代码。需要的朋友可以参考下。2011-08-08
plugin是插件的意思,通常是用于对某个现有的架构进行扩展,下面这篇文章主要给大家介绍了关于webpack Plugin的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-04-04
有一些下载网站为了整体的统一，尽量的控制软件介绍的字数显示，要不因为字数介绍太多导致用户看到下载链接比较靠后等原因而一个小功能的实现。2009-09-09
这篇文章主要给大家介绍了关于uniapp开发h5项目引入第三方js(sdk)的两种方法,在Uniapp中引入JS文件是一项常见的操作,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-02-02
这篇文章主要介绍了在HTML代码中使用JavaScript代码的例子,本文是入门级示例,初学js的同学不要错过,需要的朋友可以参考下2014-10-10
JS读秒，在某些情况下还是比较实用的，下面有个简单的示例，感兴趣的朋友可以参考下2013-09-09
这篇文章主要介绍了javascript动态添加删除tabs标签的方法,实例分析了javascript针对tabs标签的动态添加与删除方法,涉及javascript页面元素的操作技巧,需要的朋友可以参考下2015-07-07
最新评论