processing.js 学习（六）

最新推荐文章于 2019-02-17 10:52:35 发布

WalkingAlien

最新推荐文章于 2019-02-17 10:52:35 发布

阅读量752

点赞数

分类专栏：编程语言文章标签： processing 图形库

本文链接：https://blog.csdn.net/WalkingAlien/article/details/53509772

版权

编程语言专栏收录该内容

13 篇文章 0 订阅

订阅专栏

将processing.js作为JavaScript图形库

用这种方式，我们不需要pde啦！It’s very good!

processing.js省略

1207.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>My Processing Page</title>
    <script type="text/javascript" src="processing.js"></script>
</head>

<body>
    <canvas id="glibcanvas"></canvas>

    //绑定一个processing实例到指定的canvas画布
      (function(){
          var canvas=document.getElementById('glibcanvas');
          var pjs=new Processing(canvas);

    //定义草图尺寸、动画
          var value = 0;
          pjs.setup=function(){
              pjs.size(200,200);
              pjs.noloop();
          }
   //绘图函数，画了一个正弦。       
          pjs.draw=function(){
              pjs.noStroke();
              pjs.fill(255,75);
              pjs.rect(0,0,200,200);
              pjs.stroke(100,100,200);
              pjs.noFill();
              pjs.bezier(0,100, 33,100+value, 66,100+value, 100,100);
              pjs.bezier(100,100, 133,100+-value, 166,100+-value,  200,100);

        //便捷的交互函数，被鼠标的移动触发。
          pjs.mouseMoved=function(){
              value=(pjs.mouseY-100);
              pjs.redraw();
          }

          //重启草图
          pjs.setup();
          }());

    </script>
</body>

</html>