H5 캔버스의 너비, 높이, 스타일의 차이에 대한 자세한 설명

최근 캔버스의 너비와 높이인 캔버스 속성을 학습할 때 작은 문제가 발생했습니다. 관련 정보를 검색하여 마침내 해결했기 때문에 해결 과정은 아래에서 자세히 설명하지 않겠습니다. 세부사항을 살펴보자.

1. 너비 높이 속성을 사용하면 다음과 같이 디스플레이가 정상적으로 늘어나지 않습니다.

 <canvas id=mycanvas width=300 height=300>브라우저가 Canvas를 지원하지 않습니다. 업그레이드하거나 다른 브라우저를 사용하세요! </canvas><script type=text/javascript> var canvas = document.getElementById(mycanvas), ctx = canvas.getContext('2d') ctx.lineTo(300,150); .스트로크();</script>

달리기 효과는 대각선으로 다음과 같습니다

2. 스타일을 사용하면 이미지가 늘어납니다(변형).

 <스타일> #mycanvas { 너비: 150px; 높이: 150px } </style>

수술 효과

캔버스는 화판이며 화판은 도화지 위에 그리는 용기와 같습니다.

도화지와 도화지의 기본 너비와 높이는 300*150입니다. 도화지와 도화지의 너비와 높이가 같으면 이미지가 늘어나지 않습니다. 드로잉 보드가 다르면 이미지가 늘어납니다(변형됨).

1. 너비와 높이 속성은 화판과 도화지의 너비와 높이를 설정합니다.

예: width=300 height=300은 작업판의 너비와 높이가 300*300이고 도화지의 너비와 높이도 300*300임을 의미합니다. 작업의 300*300 대각선 이미지는 그렇지 않습니다. 뻗어라.

2. 도화지의 너비와 높이만 스타일에 설정됩니다. 도화지의 너비와 높이는 여전히 기본값인 300*150입니다.

(위 사진을 예로 듭니다.) 따라서 작업 중인 300*300 대각선 이미지 중 일부만 도화지에 다음과 같이 그려집니다.

그런데 도화지는 화판을 비워 두지 않으므로 도화지와 이미지를 화판과 같은 크기로 늘려야 합니다. 이 예에서는 도화지의 폭과 대지의 폭이 모두 30이고, 높이는 대지의 절반이므로 높이를 2배만 늘리면 이미지도 늘어나고 가늘어지므로, X 방향은 변하지 않고 Y 방향은 두 배로 늘어나 변형된 그림을 얻게 됩니다.

HTML5의 Canvas 너비 및 높이 설정에 대해

Canvas 요소는 기본적으로 너비와 높이가 300px이고 높이가 150px입니다. 다음 방법을 사용하면 됩니다(늘어지지 않음).

방법 1:

<캔버스 너비=500 높이=500></canvas>

방법 2: HTML5 Canvas API를 사용하여 작동 OK

var canvas = document.getElementById('조작하려는 캔버스의 id');

캔버스.폭 = 500;

캔버스.폭 = 500;

다음 방법으로 너비와 높이를 설정하면 Canvas 요소가 원래 크기에서 설정된 너비와 높이로 늘어납니다.

방법 1: CSS를 사용하면

#캔버스의 ID를 조작하려면{

너비:1000px;

높이:1000px;

｝

방법 2: HTML5 Canvas API를 사용하는 작업이 확장됩니다.

var canvas = document.getElementById('조작하려는 캔버스의 id');

canvas.style.width = 1000px;

canvas.style.height = 1000px;

방법 3: jquery의 $(#id).width(500)를 사용하면 늘어납니다.

기타: 캔버스의 너비와 높이는 백분율로 표시할 수 없습니다. 캔버스는 백분율을 숫자 값으로 표시합니다.

위의 내용은 이 기사의 전체 내용입니다. 이 기사의 내용이 모든 사람의 학습이나 업무에 특정 참고 가치가 있기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨주세요. VeVb Wulin의 지원에 감사드립니다. 회로망.