ProcessingJS 스케치를 HTML로 정렬하는 방법

저는 Processing.js 및 HTML의 초보자이며 스케치를 페이지 측면에 정렬하려고합니다. canvas에있는 ex.pde 스케치를 왼쪽, 오른쪽 또는 가운데에 정렬하려면 어떻게해야합니까? 우리가 제대로 HTML5를 사용하는 경우ProcessingJS 스케치를 HTML로 정렬하는 방법

<!DOCTYPE html> 
<html> 
    <head> 
    <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /> 
    <title>EXAMPLE</title> 
    <script>src="processing-1.4.1.js"></script> 
    </head> 
    <body> 
    <h1 align="center">Sine Wave to Infinity</h1> 
    <canvas data-processing-sources="ex.pde"></canvas> 
    </body> 
</html>

출처

2013-01-23 forochelian

, 우리는이 코드를 약간 변경해야합니다 : 여기

는 HTML 코드입니다.

<!doctype html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="stylesheet.css" type="text/css"> 
    <title>example</title> 
    <script src="processing-1.4.1.js"></script> 
    </head> 
    <body> 
    <h1>Sine Wave to Infinity</h1> 
    <canvas data-processing-sources="ex.pde"></canvas> 
    </body> 
</html>

는 (스크립트 태그의 불량 브래킷이 있었다, 연결이 종료되지 않으며, 메타 태그를 추가, 당신은 H1에서 사용되지 않는 스타일 속성을 가지고 있었다).

이제 h1과 캔버스가 왼쪽에 있습니다. 중앙에 그들을 정렬하는 것은이 경우

body { text-align: center; }

, 바로 같은 트릭을 정렬 할 수 있도록, "센터"에 모두 H1과 캔버스의 부모에 대해 "텍스트 정렬"속성을 설정하려는 의미하지만, 텍스트 - align : 맞다. 그러나 배치 목적으로 h1과 canvas 요소를 div에 래핑하고 div 안에 정렬 한 다음 (body가 아닌 해당 div에 텍스트 정렬을 할당) 원하는 위치에 유지할 수 있습니다. h1과 캔버스가 정렬되었습니다.

출처

2013-01-23 18:40:16

ProcessingJS 스케치를 HTML로 정렬하는 방법

답변

관련 문제