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

【问题标题】：How to include Processing.js code in HTML如何在 HTML 中包含 Processing.js 代码
【发布时间】：2020-04-07 14:17:35
【问题描述】：

我想为我的网页编写一个 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>

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

【问题讨论】：

id="mycanvas'中的错字

标签： javascript html canvas processing

【解决方案1】：

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

【讨论】：

抱歉，@BrightFaith 使用相同的答案似乎更快

【解决方案2】：

请尝试在画布上添加尺寸

<canvas id="mycanvas" style:"height:400px; width:400px"></canvas>

或 CSS 样式

<style>
#mycanvas {
  height:400px;
  width:400px;
}
</style>


canvas "'" also has syntax error.

【讨论】：

【解决方案3】：

因为你的 html 中有错误

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

您的画布 ID 以 " 开头并以 ' 结尾
把它改成

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

它应该被修复

【讨论】：