CSS를 사용할 때 캔버스가 늘어나지 만 "너비"/ "높이"속성에서는 보통

나는 2 개의 캔버스를 가지고 있는데, 하나는 HTML 속성 width을 사용 height하고 크기를 조정하기 위해 다른 하나는 CSS를 사용합니다.

<canvas id="compteur1" width="300" height="300" onmousedown="compteurClick(this.id);"></canvas>
<canvas id="compteur2" style="width: 300px; height: 300px;" onmousedown="compteurClick(this.id);"></canvas>

Compteur1은 정상적으로 표시되지만 compteur2는 표시되지 않습니다. 컨텐츠는 300x300 캔버스에서 JavaScript를 사용하여 그려집니다.

왜 디스플레이 차이가 있습니까?

것으로 보인다 width및 heightCSS의 속성을 그냥 표시됩니다있는 상자의 크기를 결정하는 반면, 좌표 시스템의 속성은 폭 또는 캔버스의 높이를 결정합니다.

이것은 http://www.whatwg.org/html#attr-canvas-width (JS 필요) 또는 http://www.whatwg.org/c#attr-canvas-width (컴퓨터를 먹을 것입니다 )에 설명되어 있습니다 . :

canvas요소는 요소의 비트 맵의 크기를 제어하는 두 가지 속성이 있습니다 width와 height. 지정된 경우 이러한 속성에는 음이 아닌 유효한 정수 값이 있어야합니다 . 음수가 아닌 정수를 구문 분석 하는 규칙을 사용하여 숫자 값을 가져와야합니다. 속성이 누락되었거나 해당 값을 구문 분석 할 때 오류가 발생하면 기본값을 대신 사용해야합니다. width300 속성 기본값과 height150 속성 기본값으로 설정합니다.

을 설정하려면 width와 height당신이 필요로하는, 당신은 사용할 수 있습니다

canvasObject.setAttribute('width', '475');

위해 <canvas>요소의 CSS의 규칙 width및 height페이지로 그려집니다 캔버스 요소의 실제 크기를 설정합니다. 한편, HTML은의 속성 width과 height좌표 시스템이나 캔버스 API가 사용할 '그리드'의 크기를 설정합니다.

예를 들어 다음을 고려하십시오 ( jsfiddle ).

var ctx = document.getElementById('canvas1').getContext('2d');
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 30, 30);

var ctx2 = document.getElementById('canvas2').getContext('2d');
ctx2.fillStyle = "red";
ctx2.fillRect(10, 10, 30, 30);

canvas {
  border: 1px solid black;
}

<canvas id="canvas1" style="width: 50px; height: 100px;" height="50" width="100"></canvas>
<canvas id="canvas2" style="width: 100px; height: 100px;" height="50" width="100"></canvas>

둘 다 캔버스 요소의 내부 좌표와 관련하여 동일한 것을 그렸습니다. 그러나 두 번째 캔버스에서는 전체적으로 캔버스가 CSS 규칙에 의해 더 큰 영역에 걸쳐 늘어나 기 때문에 빨간색 사각형의 너비가 두 배가됩니다.

참고 : width및 / 또는 CSS 규칙 height이 지정되지 않은 경우 브라우저는 HTML 속성을 사용하여이 값의 1 단위가 페이지에서 1 픽셀이되도록 요소의 크기를 조정합니다. 이 속성이 지정되지 않은 경우, 그들은 기본값으로 사용됩니다 width의 300및 height의 150.

CSS에서 너비와 높이를 설정하면 캔버스가 늘어납니다. 캔버스의 크기를 동적으로 조작하려면 다음과 같이 JavaScript를 사용해야합니다.

canvas = document.getElementById('canv');
canvas.setAttribute('width', '438');
canvas.setAttribute('height', '462');

브라우저는 CSS 너비와 높이를 사용하지만 캔버스 요소는 캔버스 너비와 높이에 따라 크기가 조정됩니다. 자바 스크립트에서 CSS 너비와 높이를 읽고 캔버스 너비와 높이를 설정하십시오.

var myCanvas = $('#TheMainCanvas');
myCanvas[0].width = myCanvas.width();
myCanvas[0].height = myCanvas.height();

Shannimal 보정

var el = $('#mycanvas');
el.attr('width', parseInt(el.css('width')))
el.attr('height', parseInt(el.css('height')))

CSS는 캔버스 요소의 너비와 높이를 설정하여 좌표 공간에 영향을 미치므로 모든 것이 비뚤어지게됩니다.

다음은 Vanilla JavaScript로 너비와 높이를 설정하는 방법입니다.

canvas.width = numberForWidth

canvas.height = numberForHeight

CSS 미디어 쿼리와 같은 동적 동작을 원한다면 캔버스 너비 및 높이 속성을 사용하지 마십시오. CSS 규칙을 사용한 다음 캔버스 렌더링 컨텍스트를 가져 오기 전에 CSS 너비 및 높이 스타일을 너비 및 높이 속성에 지정하십시오.

var elem = document.getElementById("mycanvas");

elem.width = elem.style.width;
elem.height = elem.style.height;

var ctx1 = elem.getContext("2d");
...