0

このコードの何が問題になっているのか誰か知っていますか？ブラウザには何も表示されません。

私の意図は、マウスの位置に基づいて2つの目を描くことです。mouseXそこで、Eyeクラスを定義し、その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">
  • 要素はhtml内canvasに含める必要があります。body

処理コードに関連:

  • 処理スクリプトには、少なくとも 1 つのsetup()関数と 1つの関数が必要draw()です。クラスでdraw()メソッドを定義しましたが、メイン関数は定義しませんでした (ちなみに、メソッド内の括弧を見逃していました)。Facedraw()draw()
  • この機能は、メインメソッドmousePressed内に含める必要があります。draw()
  • Faceクラスのインスタンスを少なくとも 1 つ(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 に非常に似ており、Java の OOP の基本を理解するためのリソースは他にもたくさんあります。グーグルで検索してください。

構文の強調表示については、こちらをご覧ください。

于 2012-09-02T12:05:03.053 に答える