视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
适用于javascript开发者的Processing.js入门教程_javascript技巧
2020-11-27 20:51:17 责编:小采
文档

这个入门指导是为javascript开发者写的。读这个文档之前,你最好掌握javascript和web开发编程,并还会非常基本的 Processing 知识。
目录:
为没有耐心看长篇大论的人准备:
如果你很着急入门,那么你就需要知道以下几点:
1、Processing.js 把 Processing 代码转变成能够在浏览器端运行的javascript代码,实质是通过标签来实现绘图的;
2、为了使用它,你的首先下载 Processing.js;
3、创建你的 后缀名为".pde"的 Processing 文件,它和通常你创建的普通文本文件一样,例如: hello-web.pde
4、创建一个 html 页面,然后在页面里外引用 Processing.js文件,再添加一个标签,该标签上指明有你的 sketch file(顾名思义,草图文件,就是Processing 文件),sketch file 可以有多个文件,多个文件用空格隔开。例如:



 
 
  
 Hello Web - Accessing JavaScript from Processing 
 
输出
Processing 使用一个同步输入
输出的模型,这就意味着 像loadImage()方法这样,需要相对长时间去执行,然而当他们执行期间,又没有任何事发生,程序等到它loadImage()执行完才去执行下一行语句。这就意味这可以依靠像loadImage()这样的方法返回的值用在接下来的代码中。
但是web浏览器却不是这样的,它使用的是异步输入输出模型,这意味着加载外部资源的方法不能使得程序等到他们加载完再执行。为了实现Processing的load方法,你不得不使用一个特殊的Processing的指令。
Processing.js指令提示浏览器,指令是写在注释里而不是Processing自身代码。这是一个典型的 Processing sketch,它需要同步加载一个图片然后画出它:



这些代码在含有Processing.js的浏览器里将不会执行,因为图片文件 picture.jpg被加载完之前就被调用了。修补这个bug的办法是让在sketch 开始执行前就把图片加载好,并且缓存起来,就是所说的预加载技术。这是修改后的代码:



注意:放在代码顶部的额外的注释行。"@jps"指令是给Processjing.js用的,不是给开发者用的。可以把它认为成额外的代码行,它们将在程序执行前就被执行了。
如果你有多个图片被加载,可以使用如下列表:



Processing.js需要更多的注意在变量的命名上比Processing
javascript其中一个最强大的特性就是它的动态,弱类型的性质。因为java是强类型的语言,所以Processing也是,他们能重复命名而不用还怕产生歧义(例如:方法的重载),Processing.js就不行。不能进入javascript的内部工作,所以对Processing.js的开发者来说,最好的建议就是不要用 function/class/etc/,也不要用来自Processing的名字来命名变量。例如,一个叫 line的变量可能看起来合理,但是它会导致问题,因为它和Processing与Procesing.js内置的函数名line()一样。
当要覆盖重载的父类方法时,Processing需要你的帮助
如果你的代码使用子类覆盖一个或多个父类里重载的方法,你需要“假”覆盖,因为,每个方法签名,你通常就没改动过:



尽管在Processing里 你不需要实现拥有(float,float)签名的空方法doSomething,但是这样做几乎是必须的,这是为了确保Processing.js在调用方法时不被搞晕。
直接将Processing 代码放在web页面里也是可以的
在canvas上,用一个 data-processing-source属性包含Processing.js加载的外部文件的做法是首选,但是推荐的方式在web页面里外引用脚本。但是写成行内引用也是可以的。
把上边例子的代码作为行内引用的方式,有必要的改动一点:

显示全文
专题