javascript - 你如何在 html 上设置 processingJS?

标签 javascript html installation processing.js

如何在 html 页面上运行 processingJS 脚本?有人可以给我发送一个测试 .html 和任何辅助代码文件,让我了解一下吗?

假设我想运行这个矩形:

rect(50,50,50,50);

最佳答案

要补充 Kevin 的回答,如果您想将 Processing.js 库与 javascript 而不是 pde (java) 代码一起使用,这可能会使深入研究变得更容易一些。

*请注意,一些 JavaScript 开发人员可能对使用 with(obj){code} 感到畏缩,但我将此作为示例以整理代码并使其不那么冗长。根据情况使用您自己的判断。

还要确保处理库与您的文件位于同一文件夹中,并使用以下代码并且文件名在以下代码中是正确的。

尽情享受吧! :)

<html>
    <head>
    </head>
    <body>
        <canvas id="output-canvas"></canvas>
        <script src="processing.1.4.8.js"></script>

<script> ( function () {

new Processing ( document.getElementById ( "output-canvas"), sketch );

function sketch ( pjs ) {

    // some initilization if you prefer

    // set the canvas size
    pjs.size ( 800, 600 );

    // ( 0, 0, 0, 0 ) - if you want a transparent sketch over some backdrop
    pjs.background ( 255, 255, 255, 255 );

    // make the ugly pjs go away
    with ( pjs ) {

        // red stroke
        stroke ( 255, 0, 0 );

        // thick border
        strokeWeight ( 5 );

        // yellow fill
        fill ( 255, 240, 0 );

        // draw a rectangle
        rect ( 50, 50, 300, 200 );

    }
}

} ) (); </script>

    </body>
</html>

关于javascript - 你如何在 html 上设置 processingJS?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39113592/

相关文章:

CSS(覆盖引导核心)

visual-studio-2008 - 如何停止 Visual Studio Express SP1 安装检测不存在的旧版本

installation - 在安装文件中创建自定义可执行名称

javascript - 激活 jQuery Accordion 脚本后从 Div 底部额外填充

javascript - Angularjs ng-disabled 按钮用于多个复选框输入

javascript - 为网站用户添加字体到 HTML/CSS 代码(跨浏览器)

html - 如何将 css 卡(例如定价卡)添加到轮播中

python - 将 Python 环境移至新的操作系统安装

javascript - 如何用自身的 innerHTML 替换 anchor 元素

Javascript 变量作为 html 标签名称