Processing.js是一个基于JavaScript语言的绘图库，可以帮助我们使用JavaScript绘制出各种有趣的形状和图案。Processing.js底层是使用Java语言实现的，如果你之前有使用过Processing的话，那么你会很快上手Processing.js。Processing.js具有良好的兼容性，可以在各种设备上运行。
首先需要在你的网页中引入Processing.js库文件。你可以从Processing.js的官方网站上下载最新版的Processing.js库文件，然后在HTML文件中引入，代码如下：
<script src="path/to/processing.js"></script>
引入之后，就可以开始编写Processing.js代码了。
我们来绘制一个最简单的图形：一个红色的圆形。
// 设置画布大小
size(200, 200);
// 绘制一个红色的圆形
fill(255, 0, 0);
ellipse(100, 100, 50, 50);
我们可以看到，我们首先使用size()函数设定画布的大小为200*200像素。然后使用fill()函数设置当前的绘图颜色，这里设置红色。最后使用ellipse()函数绘制一个圆形，圆心位置为(100, 100)，半径为25像素。
Processing.js还支持绘制动画。我们来绘制一个简单的动画：一个会变化颜色的圆形。
// 设置画布大小
size(200, 200);
// 定义圆形的位置和半径
var x = 100;
var y = 100;
var r = 25;
// 定义颜色变化的时间间隔
var interval = 1000;
// 定义用于计算时间的变量
var time = 0;
// 绘制函数
draw = function() {
// 计算当前颜色
var color = sin(time / interval * Math.PI) * 128 + 128;
// 设置当前颜色
fill(color, 0, 0);
// 绘制圆形
ellipse(x, y, r * 2, r * 2);
// 更新时间
time += 10;
};
首先我们还是使用size()函数设定画布的大小为200*200像素。然后定义了圆形的半径和位置，并且定义了一个时间间隔interval，表示每隔多少毫秒圆形的颜色就会变化一次。我们还定义了一个time变量，用于计算当前的时间。
然后我们定义了一个draw()函数，每次绘制都会调用该函数。在draw()函数内，我们根据当前时间计算出颜色，并使用fill()函数设置颜色。然后使用ellipse()函数绘制圆形。
最后更新时间。
综上，我们已经学习了Processing.js的基础知识和编程技巧。下面还有很多有趣的图案和动画等待我们去探索。
本文链接：http://task.lmcjl.com/news/8293.html