如何在 HTML 中包含Processing.js 代码

Question

我想为我的网页编写一个processing.js 脚本，但我的草图没有显示。我包括以下几行：

<canvas id="mycanvas'></canvas>

<script src="https://cdn.jsdelivr.net/processing.js/1.4.8/processing.min.js"></script>

<script>

    var sketchProc = function(processingInstance) {

     with (processingInstance) {

        size(400, 400);

        frameRate(30);

        // ProgramCodeGoesHere

        fill(255, 255, 0);

        ellipse(200, 200, 200, 200);

        noFill();

        stroke(0, 0, 0);

        strokeWeight(2);

        arc(200, 200, 150, 100, 0, PI);

        fill(0, 0, 0);

        ellipse(250, 200, 10, 10);

        ellipse(153, 200, 10, 10);

    }};

    // Get the canvas that Processing-js will use

    var canvas = document.getElementById("mycanvas");

    // Pass the function sketchProc (defined in myCode.js) to Processing's constructor.

    var processingInstance = new Processing(canvas, sketchProc);

 </script>

我没有看到任何错误消息，所以我不知道出了什么问题。

Answer 1

试试这个：在第一行中，将 id="mycanvas' 更改为 id="mycanvas" 或 id='mycanvas' （不要混淆它们）。希望这有帮助！来自另一个新手的问候；）

Answer 2

请尝试在画布上添加尺寸<canvas id="mycanvas" style:"height:400px; width:400px"></canvas>或 CSS 样式<style>#mycanvas {&nbsp; height:400px;&nbsp; width:400px;}</style>canvas "'" also has syntax error.

Answer 3

因为你的html有错误<canvas id="mycanvas'></canvas>您的画布 ID 开头"和结尾'更改为<canvas id="mycanvas"></canvas>它应该被修复