Canvas 특수 효과를 만드는 방법

이 자습서에서는 HTML5 Canvas를 사용하여 웹 그래픽을 위한 사진 특수 효과를 만드는 방법에 대해 설명합니다.

이 조항의 내용

항목설명

Canvas를 사용하여 사진을 모양으로 만들기

이 항목에서는 HTML5 Canvas를 사용하여 사진을 다양한 모양에 넣고 웹 디자인을 위한 시각적 특수 효과를 만드는 방법에 대해 설명합니다.

Canvas를 사용하여 사진에 텍스처 추가

이 항목에서는 예술적 효과를 위해 HTML5 Canvas를 사용하여 사진에 텍스처를 추가하는 방법에 대해 설명합니다.

Canvas를 사용하여 사진 색상 변경

이 항목에서는 사진에서 HTML5 canvas를 사용하여 하나 이상의 색상을 변경함으로써 웹 페이지 디자인을 향상시킬 멋진 이미지를 만드는 방법에 대해 설명합니다.

Canvas를 사용하여 투명한 사진 만들기

이 항목에서는 HTML5 canvas를 사용하여 게임 그래픽이나 웹 페이지 디자인에 사용할 수 있는 투명한 버전의 사진을 만드는 방법에 대해 설명합니다.

Canvas를 사용하여 컬러 사진을 흑백 사진으로 변환

이 항목에서는 웹 일러스트레이션에 사용할 예술적 효과 또는 고풍스러운 효과를 내도록 HTML5 Canvas를 사용하여 컬러 사진을 흑백 사진으로 변환하는 방법에 대해 설명합니다.

 

HTML5 Canvas는 픽셀을 사용하여 화면에서 그래픽 이미지를 개발합니다. 이 단원에서는 픽셀을 조작하여 사진 특수 효과를 만들기 위한 5가지 캔버스 기술을 보여줍니다. 이러한 기술을 사용하면 웹 사이트, 블로그, 동영상 게임 그래픽, 광고, 일러스트레이션 등에 대해 정보를 제공하거나 예술적 관심을 끄는 독특한 이미지를 만들 수 있습니다.

이 자습서에는 이러한 기술로 아메리카황조롱이의 사진 이미지 품질을 높일 수 있는 방법을 보여주는 5개의 독립 실행형 주석 코드 샘플이 포함되어 있습니다. 이러한 샘플은 황조롱이 사진을 원 모양에 넣는 방법, 배경에 눈 텍스처를 추가하는 방법, 색 구성을 대폭 변경하는 방법, 이미지를 투명하게 만드는 방법 그리고 전체 사진을 컬러에서 흑백으로 변환하는 방법에 대해 설명합니다.

캔버스는 픽셀을 화면에 바로 렌더링하도록 immediate mode로 작동하므로 사진 특수 효과 개발을 돕는 소중한 도구입니다. 직접 실행 모드를 사용하면 캔버스에 있는 모든 픽셀을 읽고 쓸 수 있어서 픽셀 조작을 통해 복잡한 시각적 효과를 만들 수 있습니다. 사진을 가져와서 그리면 캔버스는 그림을 빨간색, 파란색, 녹색 및 알파(불투명도를 결정함) 값으로 구성된 색상 픽셀의 배열로 해석합니다. 개별 픽셀 색상을 변경하고, 점, 선 및 모양을 픽셀 배열로 그릴 수 있으므로 캔버스에서 쉽게 사진 효과를 낼 수 있습니다. 이 섹션에서는 이러한 기능을 사용하는 방법을 보여주며 관련 기능을 자세히 설명하는 토론 자료를 제공합니다. 코드 샘플은 JavaScript와 HTML5 Canvas로 쓰였습니다. 매우 간단하게 설계되어 있어서 캔버스 사용 방법의 기본 원리를 쉽게 알 수 있습니다. 이 코드는 쉽게 확장할 수 있어서 자신만의 사용자 지정 사진 효과를 개발하여 웹 응용 프로그램을 향상시킬 수 있습니다.

관련 항목

HTML5 Canvas

 

 

표시:
© 2014 Microsoft