처리 코드가 브라우저에 아무 것도 표시하지 않습니다. 이유를 모르겠 음

이 코드의 문제점을 아는 사람이 있습니까? 그것은 브라우저에 아무것도 보여주지 않습니다.처리 코드가 브라우저에 아무 것도 표시하지 않습니다. 이유를 모르겠 음

제 의도는 마우스 위치에 따라 두 눈을 그립니다. 그래서 저는 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>

저는 초보자입니다. 그래서 제 문제가 어리 석 었는지 모르겠습니다.

그러나 어떤 힌트를 환영합니다 :)

는 Btw는 어떻게 유래의 코드에 색상을 추가?

출처

2012-09-02 kikkpunk

스크립트에 몇 가지 문제가 있습니다. HTML 페이지와 관련

당신은 header 섹션에서 문서의 인코딩을 선언해야 : <meta charset="utf-8">
가 canvas 요소가 html로 body 내부 을 포함해야한다. 처리 코드와 관련

:
는

처리 스크립트는 적어도 하나의 setup() 기능과 하나의 draw() 기능을 필요로한다. Face 클래스에서 draw() 메소드를 정의했지만 기본 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입니다.

출처

2012-09-02 12:05:03

처리 코드가 브라우저에 아무 것도 표시하지 않습니다. 이유를 모르겠 음

답변

관련 문제