zoukankan      html  css  js  c++  java
  • Learning Processing.js 1

    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 src="processing.js" mce_src="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>
  • 相关阅读:
    一个简单的进程察看器
    查找素数的程序
    两种动态创建对象的方法
    我对企业管理信息系统的看法
    下定决心,准备买dopod535,做基于M$ smartphone 2003(ce.net 4.2)的开发了
    工作流中对于事务处理的思考
    第二次安装.net2005地感受
    贴一个Microsoft Business Framework的图片上来,可能有些兄弟还不知道。
    SizeOf与Structure与Managed Code
    校园招聘技术面试方面的小题目
  • 原文地址:https://www.cnblogs.com/sanshi/p/1510371.html
Copyright © 2011-2022 走看看