0

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

我的意图是根据鼠标位置画出两只眼睛。所以我定义了一个 Eye 类，然后用变量mouseXand调用它的 draw 方法mouseY。但是，它在浏览器上没有显示任何内容。

另外，我想知道如何检测浏览器的大小，因为 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上的代码添加颜色？

4

1 回答 1

3

你的脚本有一些问题。

与html页面相关：

  • 您必须在以下header部分声明文档的编码：<meta charset="utf-8">
  • 该canvas元素应包含在htmlbody中。

与处理代码相关：

  • 处理脚本至少需要一个setup()函数和一个draw()函数。您在类中定义了一个draw()方法Face，但没有定义 maindraw()函数（顺便说一句，您错过了draw()方法中的括号）。
  • 该mousePressed功能应包含在 maindraw()方法中。
  • 您至少需要声明一个Face类的实例（在setup()函数内部）。例如：Face myFace = new Face(10, 10);。
  • 您的方法中可能还有更多语法错误draw()......

我的建议：

  • 从更简单的事情开始：从头开始编写的行越多，调试起来就越困难。尝试先画一个椭圆，然后逐步在代码中添加更多内容。
  • 将处理脚本保存在单独的文件中。它更干净，您可以使用处理编辑器或处理在线草图对其进行调试：
    <!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>
  • 查看本教程以获取有关处理中的对象和类的一些想法。
  • 处理中的语法与 java 非常相似，并且有更多资源可用于了解该语言的 OOP 基础知识。只是谷歌它。

对于语法高亮，看这里。

于 2012-09-02T12:05:03.053 回答