canvas. width 와 canvas. style. width 의 차이 및 응용

오늘 이야기 한 내용 은 canvas. width 와 canvas. style. width 의 차이 입 니 다. canvas 프로젝트 를 하기 전에 저 는 이 두 가지 속성 을 깊이 이해 하지 못 했 습 니 다. 최근 에 canvas 프로젝트 의 적응 문 제 를 연구 하고 있 습 니 다. 특히 canvas 에 그림 을 넣 었 을 때 그림 이 모호 한 문제 에 부 딪 혔 습 니 다. 이런 '잡 증' 들 은모두 글 에서 말 하고 자 하 는 canvas. width / canvas. style. width 와 관계 가 있 습 니 다.
canvas. width / canvas. style. width 개관
먼저 이 예 를 보 세 요.https://codepen.io/parkeeers/...

// JavaScript
function drawDiagonal(id) {
  var canvas = document.getElementById(id);
  var context = canvas.getContext("2d");
  context.beginPath();
  context.moveTo(0, 0);
  context.lineTo(100, 100);
  context.stroke();
}

window.onload = function() {
  drawDiagonal("diagonal1");
  drawDiagonal("diagonal2");
  drawDiagonal("diagonal3");
  drawDiagonal("diagonal4");
}
 

효과 도

첫 번 째 canvas 를 살 펴 보 겠 습 니 다. canvas 의 크기 를 지 정 했 습 니 다. canvas. style 의 크기 를 지정 하지 않 았 습 니 다. 그러면 캔버스 는 실제 100 * 100 크기 입 니 다. 우리 JS 코드 에서 도 (0, 0) 에서 (100, 100) 까지 의 대각선 을 그리고 있 습 니 다.첫 번 째 는 전혀 문제 없어 요

두 번 째 canvas, canvas 자체 와 canvas. style 은 모두 정 의 를 내 렸 습 니 다. 정의 에서 볼 수 있 듯 이 canvas. style 은 우리 의 캔버스 크기 를 2 배로 확대 하 는 것 입 니 다. 그림 에서 도 볼 수 있 습 니 다. 이 선 은 대각 을 가리 키 는 데 문제 가 없 지만 굵 어 졌 습 니 다. 이것 은 canvas 가 먼저 자신의 캔버스 크기 를 참고 하여 그립 니 다. 그 려 졌 습 니 다. style 이 지정 한 크기 입 니 다.브 라 우 저 페이지 에 렌 더 링

세 번 째 canvas 는 그 자체 의 canvas 와 canvas. style 이 비례 하지 않 습 니 다. html 에 표시 되 지 않 은 성명 canvas 자체 의 크기 는 style 의 크기 만 설명 합 니 다. 이 경우 canvas 캔버스 자체 의 크기 는 기본 값 300*150 입 니 다.그러면 우 리 는 300*150 을 바탕 으로 그림 을 그립 니 다. 네 번 째 깨끗 한 canvas 의 선 처럼 그립 니 다. 그림 이 끝 난 후에 페이지 에 렌 더 링 을 해 야 합 니 다. 이 럴 때 canvas 2 의 세트 처럼 style 이 지정 한 width, height 에 따라 크기 를 조정 하면 상 태 는 네 번 째 canvas 에서 세 번 째 마지막 모습 으로 변 합 니 다.공식 을 살 펴 보 자. 기본 크기 300*150, style 지정 크기 200*200 의 마지막 표준 위치 에서 (100, 100) 는 style 에서 200*200 (66.7, 133.333)

로 바 뀌 었 다.

마지막 그림 은 canvas 의 큰 시간, 기본 크기, 표준 300 * 150

을 지정 하지 않 으 면
결론: 세 가지 다 르 지만 서로 관련 된 예 를 들 었 습 니 다. 이 를 통 해 우 리 는 canvas 자체 가 캔버스 라 는 것 을 알 수 있 습 니 다. 우 리 는 캔버스 를 어떻게 이해 하 는 지, 우리 가 canvas. width 와 canvas. style. width 의 차 이 를 정확하게 이해 할 수 있 는 지 를 결정 합 니 다.canvas. width 는 캔버스 의 실제 크기 입 니 다. 이 캔버스 는 우리 가 볼 수 있 는 캔버스 가 아 닙 니 다. 우리 가 볼 수 있 는 캔버스 는 브 라 우 저 에서 canvas. style. width / canvas. style. height 를 처리 한 후에 가공 처리 한 캔버스 입 니 다.한편, cavnas. style. width / canvas. style. height 는 캔버스 를 어떤 형식 으로 확대 하여 페이지 에 보 여 줄 지 결정 합 니 다.전환 의 비율 은 바로 위의 두 공식 이다.마지막 으로, 우리 가 canvas 의 실제 시간 을 지정 하지 않 을 때, 기본적으로 300 * 150 에 따라 처리 합 니 다.

canvas. width / canvas. height 는 캔버스 의 실제 크기 를 나타 내 는데 사실은 우 리 는 볼 수 없다

canvas. style. width / canvas. style. height 는 브 라 우 저 에 보 이 는 / 최종 크기

를 출력 합 니 다.

canvas 의 실제 시간 을 제공 하지 않 습 니 다. 기본 값 300*150 으로 처리 합 니 다. canvas. style 도 제공 하지 않 으 면 style. width 가 비어 있 습 니 다. 주의 하 십시오 300*150

canvas 그림 모호 한 문제 (보완 되 어야 함)
canvas 그림 의 모호 한 문 제 를 이야기 하기 전에 우 리 는 위의 두 번 째 canvas 를 볼 수 있 습 니 다. 실제 크기 와 스타일 이 지정 한 크기 는 2 배 관 계 를 가지 고 마지막 으로 우리 의 라인 도 2 배 확대 되 었 습 니 다. 여러분 은 하나의 개념 을 주의해 야 합 니 다. canvas 그림 은 자신의 실제 크기 로 자 리 를 정 하고 그립 니 다. 마지막 으로 브 라 우 저 에서 페이지 로 렌 더 링 할 때canvas. style. width / cavnas. style. height 에서 결 정 됩 니 다.