HTML 캔버스 테두리 제거

대화 형 애니메이션으로 내 홈페이지 http://geotheory.co.uk/을 사용자 정의하고 있지만 페이지에서 보이지 않는 느낌을 줄 수 있습니다. 애니메이션 캔버스 객체의 경계를 제거하여 불필요한 스크롤 막대를 만들려고합니다. 나는 border 및 padding과 같은 다양한 스타일 옵션을 시도했지만 행운은 없습니다. 애니메이션은 Processing script이고 그 다음은 translated이며 자바 스크립트입니다. index.html 읽기 :HTML 캔버스 테두리 제거

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>geotheory.co.uk</title> 
    <style> 
     canvas:focus{outline:none;} 
    </style> 

</head> 
<body id="home" bgcolor="blue"> 
    <script src="processing-1.4.1.min.js"></script> 
    <div id="canvasContainer"> 
    <canvas data-processing-sources="rectangles.pde"></canvas> 
    </div> 
</body>

감사의 말.

출처

2012-12-26 geotheory

내가 ... 브라우저의 기본 스타일을 resetted 적이 없다 추측 그래서 당신은 ..이

* { 
    margin: 0; 
    padding: 0; 
}

설명을 사용하여 기본 스타일을 다시 설정해야합니다 : 브라우저는 일부 요소에 여백, 여백을 제공하므로 재설정하려면 inorder에서 CSS 스타일러스를 사용해야합니다.

또한 <canvas>에 display: block;을 사용하십시오 (Kolink Said와 마찬가지로)

출처

2012-12-26 15:59:03

불충분합니다. 한 가지 문제점을 해결합니다 (엽총 포함).하지만 두 가지가 있습니다. –

@Kolink 글쎄, 거기 왜, 왜 블록을 참조하십시오? –

기본적으로 '

CSS에 body 태그에 margin: 0; 태그를 추가하고 CSS에 display: block; 태그에서 canvas 태그를 추가하십시오.

예 :

canvas { 
    display:block; 
} 

body { 
    margin:0; 
}

출처

2012-12-26 15:59:00

HTML 캔버스 테두리 제거

답변

관련 문제