Canvas를 사용하여 무엇을 할 수 있는지에 대한 간략한 설명입니다.

이 글의 내용은 Canvas가 무엇을 할 수 있는지 간략하게 이야기하는 것입니다. Canvas를 사용하는 방법은 무엇입니까? 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

canvas 무엇을 할 수 있나요?

canvas는 HTML5의 새로운 요소로 그래픽, 아이콘 및 기타 시각적 이미지를 그릴 수 있습니다. 또한 그림 효과와 애니메이션을 만드는 데에도 사용할 수 있습니다. 전체 명령 세트를 익히면 캔버스를 사용하여 풍부한 웹 애플리케이션을 만들 수 있습니다. 캔버스를 잘 활용하려면 먼저 자바스크립트를 잘 마스터해야 합니다. [추천 관련 영상 튜토리얼: JavaScript 튜토리얼]

canvastag

<canvas width="400" height="300">
</canvas>

물론 CSS를 통해서도 설정할 수 있어요! 너비와 높이를 설정하지 않을 경우 기본 너비와 높이는 300*150입니다.

낮은 버전의 브라우저에서는 캔버스 태그 사이에 피드백에 필요한 정보를 넣습니다.

<canvas width="400" height="300">
    <p>你想看我，就升级浏览器吧！</p>
</canvas>

컨텍스트를 얻으세요. 모든 페인팅 작업은 컨텍스트에 있으며 현재는 2D만 지원합니다.

window.onad=function(){    
     var canvas = document.getElementById("myCanvas");    
     var context= can.getContext("2d");
}

Retina디스플레이

Retina 및 표준 화질 디스플레이에서 캔버스 디스플레이를 선명하게 만드는 것은 캔버스에 화면의 픽셀 밀도에 따라 결정되는 비율을 곱하기만 하면 됩니다. 먼저 픽셀 값이 캔버스에 어떻게 저장되는지 이해해야 합니다.

백업 스토리지는 캔버스에 데이터를 저장하는 각 픽셀의 색상 값입니다. 우리의 목표는 캔버스에 표시되는 모든 픽셀에 대해 백 스토어에 하나의 픽셀을 두는 것입니다. 픽셀이 화면에 푸시되기 전에 해당 값이 여기에서 계산됩니다. 그러나 백업 메모리에 표시되는 픽셀 수는 화면에 푸시된 픽셀 수와 같지 않을 수 있습니다. Retina 장치에서는 캔버스의 너비와 높이가 다른 HTML 요소에 비해 일관된 크기와 위치를 유지하기 위해 두 배가 되므로 결과적으로 내용이 늘어나고 모호해집니다. 이러한 늘어짐을 방지하려면 적절한 경우 뒷면 수납 공간의 너비와 높이를 두 배로 늘려야 합니다.

래스터 이미지 또는 비디오 데이터로 작업하는 경우 Retina 디스플레이의 "픽셀 처리"를 위해 캔버스를 추가로 최적화하는 방법을 알아보세요. 어떤 경우든 더 큰 캔버스는 도움이 되지 않을 수 있으므로 캔버스를 최적화하도록 선택해야 합니다. Retina 장치 순서대로. 먼저 캔버스를 렌더링하는 모니터가 실제로 Retina를 지원하는지 확인하세요. 그렇다면 장치의 픽셀 비율에 따라 백업 저장소의 크기를 조정하세요.

한편 레티나 장치의 픽셀 비율은 2입니다. x 및 y 방향에서 디스플레이 픽셀과 백업 저장 픽셀의 비율이 2:1이기 때문입니다. 반면에 표준 화질 모니터는 1개의 백업 저장 픽셀을 1개의 디스플레이 픽셀에 매핑하므로 해당 장치 픽셀 비율은 항상 1입니다.

JavaScript에서는 대체 비율 요소를 결정할 수 있습니다. 먼저 브라우저가 window.devicePixelRatio를 정의했는지 확인하세요. 장치의 픽셀 비율이 1보다 크면 사용자는 Retina 디스플레이를 사용하는 것입니다. 적절한 백업 비율을 결정하는 코드는 다음과 같습니다.

window.onload=function(){
       var canvas = document.getElementById("myCanvas");
      var context= canvastContext("2d");
       var scaleFactor = backingScale(ctx);
       if (scaleFactor > 1) {
              canvas.width = canvas.width * scaleFactor;
              canvas.height = canvas.height * scaleFactor;
              // update the context for the new canvas scale
              var context = canvas.getContext("2d");
       }
}
 function backingScale(context) {
              if ('devicePixelRatio' in window) {
                     if (window.devicePixelRatio > 1) {
                            return window.devicePixelRatio;
                     }
              }
              return 1;

}

요약: 위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다.

위 내용은 Canvas를 사용하여 무엇을 할 수 있는지에 대한 간략한 설명입니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!