Question

我正在尝试使用p5.js和javascript制作程序。但我在p5.dom.js中遇到了一个问题并得到了如下错误：

＆＃34;未捕获TypeError：canvas1.position不是函数＆＃34;

我几乎消耗了一天:(

我准备使用p5.js创建另一个js文件。

这是我的代码！

main.html中

<html>
    <head>
        <meta charset="UTF-8">
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    </head>
    <body>
        <canvas id="canvas" width=1200 height=1334></canvas>
        <script src="coords.js"></script>
        <script src="p5/p5/p5.min.js"></script>
        <script src="p5/p5/p5.dom.js"></script>

    </body>
</html>

coords.js

if(flag==1 && count==2){
    $('body').append('<script src="sketch.js"></script>');
        $.getScript("p5/p5/p5.min.js")
            .done(function(){
            $.getScript("p5/p5/p5.dom.js")
                .done(function(){
                $.getScript("sketch.js",function(){
                    setup();
                });
            }); 
    });
}

sketch.js

var canvas1;
function setup(){
    canvas1=createCanvas(width1,height1);
    canvas1.position(minX1,maxY1);//got error here!!
}

请帮助我!!

Answer 1

好的，假设coords有其他代码你应该做这样的事情：
正常包含sketch.js，并将其放在p5文件之后然后正常包含coords

<html>
    <head>
        <meta charset="UTF-8">
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    </head>
    <body>
        <canvas id="canvas" width=1200 height=1334></canvas>
        <script src="p5/p5/p5.min.js"></script>
        <script src="p5/p5/p5.dom.js"></script>
        <script src="sketch.js"></script>
        <script src="coords.js"></script>
    </body>
</html>

然后您的coords.js可能如下所示：

if(flag==1 && count==2){
    setup();
}

这样你就没有奇怪的和不必要的ajax调用加载你已经加载的代码。

修改

鉴于setup()默认运行，您应该能够将setup置于if条件中并完全删除sketch.js。

if(flag==1 && count==2){
    var canvas1;
    function setup(){
        canvas1=createCanvas(width1,height1);
        canvas1.position(minX1,maxY1);//got error here!!
    }
}

或由g aand

回答

if (flag == 1 && count == 2) {
    $('body').append('<script src="sketch.js"></script>');
}

或者你可以use a namespace：

var s = function( p ) {
    var x = 100; 
    var y = 100;

    p.setup = function() {
        p.createCanvas(x, y);
        p.position(x,y);
    };

    p.draw = function() {
        p.background(0);
        p.fill(255);
        p.rect(x,y,50,50);
    };
};

if (flag == 1 && count == 2) {
    var myp5 = new p5(s);
}

未捕获的TypeError：canvas1.position不是p5.js中的函数

1 个答案:

修改