html에서 어떻게 설정 처리합니까?

HTML 페이지에서 processingJS 스크립트를 어떻게 실행합니까? 누군가 내게 테스트 .html과 아이디어를 얻기위한 보조 코드 파일을 보낼 수 있습니까? 당신이 알고 싶은html에서 어떻게 설정 처리합니까?

rect(50,50,50,50);

출처

2016-08-24 DIZAD

모든이 페이지에 : JavaScript Quick Start | Processing.js

그러나 기본적으로, 당신이 처리를로드하는 HTML 파일을 생성 할 필요가

의 내가이 사각형을 실행하고 싶어한다고 가정 해 봅시다 .js 라이브러리를 선택한 다음 Processing.js 코드를 작성하고 .pde 파일을 해당 페이지의 canvas 태그에로드하십시오. 그것은 다음과 같습니다 : 그 작업을 수행하는

<!DOCTYPE html> 
<html> 
<head> 
    <title>Hello Web - Processing.js Test</title> 
    <script src="processing-1.3.6.min.js"></script> 
</head> 
<body> 
    <h1>Processing.js Test</h1> 
    <p>This is my first Processing.js web-based sketch:</p> 
    <canvas data-processing-sources="hello-web.pde"></canvas> 
</body> 
</html>

가장 쉬운 방법은, 다음 실행을 클릭합니다 (버전 2.2.1을 사용해야 할 수도 있습니다)을 처리 편집기에서 자바 스크립트 모드를 사용하는 것입니다. 그런 다음 편집기에서 작성한 파일을 보거나 (보기> 스케치 폴더로 이동) 후드에서 진행중인 작업을보다 잘 이해할 수 있습니다.

출처

2016-08-24 14:01:33

당신이 다이빙을 조금 더 쉽게 만들 수 있습니다 자바 스크립트가 아니라 PDE 이상 (자바) 코드로 Processing.js 라이브러리를 사용하려는 경우, 케빈의 대답에 추가 할 수 있습니다.

을 * 참고 일부 자바 스크립트 사람들 with(obj){code}을 사용하는 것이 좋지 않을지 모르지만,이 예제를 사용하여 코드를 정리하고 덜 모호하게 만듭니다. 상황에 따라 자신의 판단을 사용하십시오.

또한 처리 라이브러리가 아래 코드의 파일과 동일한 폴더에 있고 파일 이름이 올바른지 확인하십시오.

즐기십시오! :)

<html> 
    <head> 
    </head> 
    <body> 
     <canvas id="output-canvas"></canvas> 
     <script src="processing.1.4.8.js"></script> 

<script> (function() { 

new Processing (document.getElementById ("output-canvas"), sketch); 

function sketch (pjs) { 

    // some initilization if you prefer 

    // set the canvas size 
    pjs.size (800, 600); 

    // (0, 0, 0, 0) - if you want a transparent sketch over some backdrop 
    pjs.background (255, 255, 255, 255); 

    // make the ugly pjs go away 
    with (pjs) { 

     // red stroke 
     stroke (255, 0, 0); 

     // thick border 
     strokeWeight (5); 

     // yellow fill 
     fill (255, 240, 0); 

     // draw a rectangle 
     rect (50, 50, 300, 200); 

    } 
} 

})(); </script> 

    </body> 
</html>

출처

2016-08-27 03:30:12 Nolo

html에서 어떻게 설정 처리합니까?

답변

관련 문제