Learning Processing.js - 1
标签：
JavaScript
Learning Processing.js - 1
Processing.js is an open programming language for people who want to program images, animation, and interactions for the web without using Flash or Java applets. Processing.js uses Javascript to draw shapes and manipulate images on the HTML5 Canvas element.
Basic Syntax:
As with any language, you begin by defining your global variables. Then you create a setup() function, where you control the visualization’s properties, like the canvas size, frame rate and perhaps variables such as the stoke-weight or background-color.
The next step is to create your draw() function, which controls the behavior of each frame in your animation. The draw function loops continuously unless you tell it otherwise by using the exit() command.
Following is my first Processing.js example:
<html><head> <title></title> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="processing.js" mce_class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="processing.js" type="text/javascript"></script> <script type="text/javascript"> window.onload = function() { var canvas = document.getElementById('canvas'); var script = document.getElementById('processing').text; Processing(canvas, script); }; </script> </head><body> <script id="processing" type="application/processing"> int x; void setup() { // The size function is a statement that tells the computer // how large to make the window. // Each function statement has zero or more parameters. // Parameters are data passed into the function // and used as values for specifying what the computer will do. size(200, 200); // The background function is a statement that tells the computer // which color to make the background of the window background(100); stroke(255); frameRate(60); x = width; } // The statements in draw() are executed until the // program is stopped. Each statement is executed in // sequence and after the last line is read, the first // line is executed again. void draw() { background(100); x--; if(x < 0) { x = width - 1; } line(x, 0, x, height); } </script> <canvas id="canvas"></canvas></body></html>
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
相关文章推荐
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦