Question

有人知道这段代码有什么问题吗？它在浏览器中没有显示任何内容。

我的目的是根据鼠标位置画两只眼睛。因此，我定义了一个Eye类，然后使用变量mouseX和mouseY调用其draw方法。但是，它在浏览器上没有显示任何内容。

另外，我想知道如何检测浏览器的大小，因为screen.width和screen.height似乎无法在浏览器中运行。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="processing.js"></script>
<script type="text/processing" data-processing-target="mycanvas">


void setup(){
    size(400,400);
    smooth();
    background(225);
    }

if (mousePressed){
    Face.draw(mouseX,mouseY);}

class Face{
    float x,y,a;

    Face(float ax,float ay){
    x=ax;
    y=ay;
    a=random(1,5);}

    void draw{

        noFill();
        stroke(0);
        //eye1
        ellipse(x+2.2*a,y-a,a/2,a/2);
        //eyelashes1
        arc(x+2.2*a，y-.5*a,1.2*a,1.2*a,PI,2*PI)；
        //eyebrows1
        arc(x+3*a,y-.3,2*a,2*a,5/4*PI,9/4*PI);

        //eye2
        ellipse(x-2.2*a,y-a,a/2,a/2);
        //eyelashes2
        arc(x-2.2*a，y-.5*a,1.2*a,1.2*a,PI,2*PI)；
        //eyebrows2
        arc(x-3*a,y-.3,2*a,2*a,5/4*PI,9/4*PI);



    }


    }


</script>
</head>
<body></body>
<canvas id="mycanvas"></canvas>
</html>

我是初学者，所以我不知道我的问题是不是愚蠢。

但欢迎任何提示：）

顺便说一下如何在stackoverflow上的代码中添加颜色？

Answer 1

您的脚本存在一些问题。

与html页面相关：

您必须在header部分声明文档的编码：<meta charset="utf-8">
canvas元素应包含在内 html body。

与处理代码相关：

处理脚本至少需要一个setup()函数和一个draw()函数。您在draw()课程中定义了Face方法，但未在主要draw()课程中定义{顺便提一下，您错过了draw()方法中的括号。
mousePressed功能应包含在主draw()方法中。
您至少需要声明Face类的一个实例（在setup()函数内）。例如：Face myFace = new Face(10, 10);。
您的draw()方法中可能存在更多语法错误......

我的建议：

从更简单的事情开始：从头开始编写的行越多，调试就越困难。尝试先绘制一个椭圆，然后逐步向代码中添加更多内容。
将处理脚本保存在单独的文件中。它更干净，您可以使用处理编辑器或processing online sketch：

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <title>Testing testing</title>
            <script type="text/javascript" src="processing.js"></script>
        </head>

        <body>
            <canvas id="my-sketch" data-processing-sources="my-sketch.pde"></canvas>
        </body>
    </html>

检查this tutorial以获得有关处理中的对象和类的一些想法。
处理中的语法与java非常相似，并且有更多资源可用于理解该语言的OOP基础知识。只需google for it。

语法高亮显示look here。

处理代码在浏览器上显示任何内容。不知道为什么

1 个答案: