首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

Processing.js快速入门-javascript开发版

2013-03-19 
Processing.js快速入门--javascript开发版介绍:这个入门指导是为javascript开发者写的。读这个文档之前,你

Processing.js快速入门--javascript开发版

介绍:

        这个入门指导是为javascript开发者写的。读这个文档之前,你最好掌握javascript和web开发编程,并还会非常基本的 Processing 知识。

目录:

为没有耐心看长篇大论的人准备:

         如果你很着急入门,那么你就需要知道以下几点:

             1、Processing.js 把 Processing 代码转变成能够在浏览器端运行的javascript代码,实质是通过<canvas>标签来实现绘图的;

             2、为了使用它,你的首先下载 Processing.js;

             3、创建你的 后缀名为".pde"的 Processing 文件,它和通常你创建的普通文本文件一样,例如: hello-web.pde

             4、创建一个 html 页面,然后在页面里外引用 Processing.js文件,再添加一个<canvas>标签,该<canvas>标签上指明有你的 sketch file(顾名思义,草图文件,就是Processing 文件),sketch file 可以有多个文件,多个文件用空格隔开。例如:             

 1 <script src="processing-1.3.6.min.js"></script> 2 <script type="application/processing" data-processing-target="pjs"> 3 void setup() { 4   size(200, 200); 5   background(100); 6   stroke(255); 7   ellipse(50, 50, 25, 25); 8   println('hello web!'); 9 }10 </script>11 <canvas id="pjs"> </canvas>

       这些代码是更复杂了,因为它没有指出那个canvas配那个脚本文件(即:你可以在一个页面引用多个Processing sketch,同样也可以有多个canvas)。也没有说明脚本的"type"属性,这个属性是用来区别javascript和Processing代码的(浏览器将忽略 Processing 脚本)。最后,注意:"id"和"target"属性的用法,它俩是用来连接Processing脚本和相关的canvas的。

原文来自Processing.js的官网:http://processingjs.org/articles/jsQuickStart.html


热点排行