픽셀로 캔버스에 그리기 HTML5



 

픽셀로 캔버스에 그리기

 

이미지에 대한 픽셀단위 조작이 가능하다. 조작해서 뭐하냐고?

예를들어 이미지의 각 픽셀별 수치값을 얻어온 뒤, 전체 이미지 또는 특정영역의 밝기값을 수정하는 등의 고차원적인 작업을 가능하게 해준다.

 

이러한 작업을 하기위해서는 기초작업이 필요한데, ImageData 형의 객체를 생성해야 한다는 것이다.

 

      - createImageData(width, height)

너비와 높이 크기의 ImageData를 만든다. 초기에는 투명하다.

      - createImageData(imagedata)

넘겨받은 ImageData와 같은 너비, 높이의 ImageData를 만든다. 초기에는 투명하다.

      - getImageData(x, y, width, height)

현재 캔버스에 그려진 이미지를 ImageData로 얻는다.

(x, y)를 왼쪽 위 시작점으로 하고 너비와 높이 만큼의 사각형 범위의 비트맵이 대상이다.

 

이렇게 얻어진 ImageData는 세가지의 속성을 갖게된다.

 

 

      - width : 이미지 데이터의 너비 

      - height : 이미지 데이터의 높이

      - data : 픽셀 데이터를 타나내는 수치값으로 이루어진 1차원 배열

 

캔버스의 픽셀조작은 결국 ImageData의 data 속성을 조작한다는 것이다.

여기서 중요한점은 ImageData는 얻어진 순간부터 원래 캔버스와는 분리된다는 점이다.

 

그러면 어떻게 적용하는건데?

조작된 비트맵배열(ImageData)를 다시 캔버스에 적용하려면 다음과 같은 메서드가 필요하다.

 

       - putImageData(imagedata, x, y, dirtyX, dirtyY, dirtyWidth, dirtyHeight);

 

예제를 통해서 이 메서드를 어떻게 사용하는것인지 정확히 살펴보자.

 

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> HTML5 TEST </TITLE>
</HEAD>
<BODY>
 <canvas id="canvas1" width="500" height="500"></canvas>

<SCRIPT LANGUAGE="JavaScript">
<!--
var canvas = document.getElementById("canvas1");
var context = canvas.getContext("2d");

context.fillStyle = "red";
context.fillRect(20, 20, 100, 100);
context.fillStyle = "green";
context.fillRect(50, 50, 100, 100);

 

alphaRect(context, 0.5, 40, 60, 80, 40);

 

function alphaRect(context, alpha, x, y, w, h){
 var imageData = context.getImageData(x, y, w, h);

 for(var i = 0; i< imageData.data.length; i++){
  //투명도변경
  if(i % 4 == 3){
   //픽셀조작의 경우는 투명도도 0~255 범위의 값으로 지정
   imageData.data[i] = 255 * alpha;
  }
 }

 //변경된 비트맵을 캔버스에 다시 그림
 context.putImageData(imageData, x, y);

//-->
</SCRIPT>

</BODY>
</HTML>

 

이 예제에서는 alphaRect() 라는 새로운 메서드를 정의하였다.

각기 다른 (20, 20)위치와 (50, 50)위치에 100x100 짜리 사각형 두개를 그려넣은뒤.

alphaRect() 메서드를 호출하여 지정된 범위에 대해 투명도 값을 변경하였다.

 

투명도 변경시 'if(i % 4 == 3)' 조건절이 사용되었는데

비트맵 배열은 R/G/B/A 이렇게 네개의 구성으로 되어있으므로, 우리가 변경하고자 하는것은 A, 즉 알파값이므로

위 조건문으로 네번째 값만 변경하도록 조건을 준 것이다.

 

이쯤되서 결과를 살펴보자.

 

 

지정된 좌표에 투명도가 조절된 것을 확인 할 수 있다.


덧글

댓글 입력 영역


통계 위젯 (화이트)

1622
132
358626

red 210