Canvas 간단 한 애니메이션 과 픽 셀 처리

애니메이션
자바 스 크 립 트 를 이용 하면 canvas 요소 에서 애니메이션 효 과 를 쉽게 낼 수 있 습 니 다.

var posX = 20,

    posY = 100;



setInterval(function() {

    context.fillStyle = "black";

    context.fillRect(0,0,canvas.width, canvas.height);



    posX += 1;

    posY += 0.25;



    context.beginPath();

    context.fillStyle = "white";



    context.arc(posX, posY, 10, 0, Math.PI*2, true); 

    context.closePath();

    context.fill();

}, 30);

 
위의 코드 는 작은 원점 을 만들어 30 밀리초 간격 으로 오른쪽 아래로 이동 하 는 효과 가 있 습 니 다.setInterval 함수 의 시작 부분 에서 캔버스 를 검은색 바탕색 으로 다시 렌 더 링 하 는 이 유 는 이전 단계 의 작은 원점 을 지우 기 위해 서 입 니 다.
원심 좌 표를 설정 하면 각종 운동 궤적 이 생 길 수 있다.
먼저 올 라 갔다 내 려 갔다.

var vx = 10,

    vy = -10,

    gravity = 1;



setInterval(function() {

    posX += vx;

    posY += vy;

    vy += gravity;

    // ...

});

 
위의 코드 에서 x 좌 표 는 계속 오른쪽으로 움 직 이 는 것 을 나타 낸다.y 좌 표 는 먼저 작 아진 다음 에 중력 작용 에 의 해 계속 커지 고 먼저 올 라 간 후에 내 려 간 다 는 뜻 이다.
작은 공이 계속 튕 겨 나 간 후 점차 정지 되 었 다.

var vx = 10,

    vy = -10,

    gravity = 1;



setInterval(function() {

    posX += vx;

    posY += vy;



    if (posY > canvas.height * 0.75) {

          vy *= -0.6;

          vx *= 0.75;

          posY = canvas.height * 0.75;

    }



    vy += gravity;

    // ...

});

위의 코드 에 따 르 면 작은 공의 y 좌표 가 화면 아래 75% 의 위치 에 있 으 면 x 축 으로 이동 하 는 속 도 는 원래 의 75% 로 변 하고 Y 축 으로 지난번 반등 높이 의 40% 를 반등 한다.
픽 셀 처리
getImageData 방법 과 putImageData 방법 을 통 해 모든 픽 셀 을 처리 하여 이미지 내용 을 조작 할 수 있 습 니 다.
filter 가 픽 셀 을 처리 하 는 함수 라 고 가정 하면 전체 Canvas 에 대한 처리 절 차 는 아래 코드 로 표시 할 수 있 습 니 다.

if (canvas.width > 0 && canvas.height > 0) {



    var imageData = context.getImageData(0, 0, canvas.width, canvas.height);



    filter(imageData);



    context.putImageData(imageData, 0, 0);



}

다음은 몇 가지 흔히 볼 수 있 는 처리 방법 이다.
그 레이스 케 일 효과
그 레이스 케 일 (grayscale) 은 빨간색, 녹색, 파란색 세 픽 셀 값 을 취 하 는 산술 평균 값 으로 실제 적 으로 그림 을 흑백 으로 바 꾸 었 다.d [i] 가 픽 셀 배열 의 한 픽 셀 의 빨간색 값 이 라 고 가정 하면 d [i + 1] 은 녹색 값 이 고 d [i + 2] 는 파란색 값 이 며 d [i + 3] 는 알파 채널 값 입 니 다.그 레이스 케 일 로 전환 하 는 알고리즘 은 빨간색, 녹색, 파란색 세 개의 값 을 더 한 후 3 으로 나 눈 다음 결 과 를 배열 로 쓰 는 것 이다.

grayscale = function (pixels) {

    var d = pixels.data;



    for (var i = 0; i < d.length; i += 4) {

      var r = d[i];

      var g = d[i + 1];

      var b = d[i + 2];

      d[i] = d[i + 1] = d[i + 2] = (r+g+b)/3;

    }



    return pixels;

};

 
복고 효과
복고 효과 (sepia) 는 빨간색, 녹색, 파란색 세 개의 픽 셀 을 각각 이 세 개의 값 의 특정한 가중 평균 치 를 취하 여 이미지 에 오래된 효 과 를 가 져 다 주 는 것 이다.

sepia = function (pixels) {

    var d = pixels.data;



    for (var i = 0; i < d.length; i += 4) {

      var r = d[i];

      var g = d[i + 1];

      var b = d[i + 2];

      d[i]     = (r * 0.393)+(g * 0.769)+(b * 0.189); // red

      d[i + 1] = (r * 0.349)+(g * 0.686)+(b * 0.168); // green

      d[i + 2] = (r * 0.272)+(g * 0.534)+(b * 0.131); // blue

    }



    return pixels;

};

 
적색 몽타주 효과
빨간색 몽타주 는 그림 을 빨간색 으로 만 드 는 효 과 를 말한다.알고리즘 은 빨간색 채널 을 빨간색, 녹색, 파란색 세 값 의 평균 값 으로 설정 하고 녹색 채널 과 파란색 채널 을 모두 0 으로 설정 하 는 것 이다.

red = function (pixels) {

    var d = pixels.data;



    for (var i = 0; i < d.length; i += 4) {

      var r = d[i];

      var g = d[i + 1];

      var b = d[i + 2];

      d[i] = (r+g+b)/3;        //         

      d[i + 1] = d[i + 2] = 0; //             0

    }



    return pixels;

};

 
밝기 효과
밝기 효과 (brightness) 는 그림 을 더 밝 거나 어 두 워 지게 하 는 것 을 말한다.알고리즘 은 빨간색 채널, 녹색 채널, 파란색 채널 을 플러스 또는 마이너스 로 합 니 다.

brightness = function (pixels, delta) {

    var d = pixels.data;



    for (var i = 0; i < d.length; i += 4) {

          d[i] += delta;     // red

          d[i + 1] += delta; // green

          d[i + 2] += delta; // blue   

    }



    return pixels;

};

 
반전 효과
반전 효과 (invert) 는 그림 이 색채 가 뒤 바 뀌 는 효 과 를 나타 내 는 것 을 말한다.알고리즘 은 빨간색, 녹색, 파란색 채널 로 각자 의 반대 값 (255 - 원 값) 을 취한 다.

invert = function (pixels) {

    var d = pixels.data;



    for (var i = 0; i < d.length; i += 4) {

        d[i] = 255 - d[i];

        d[i+1] = 255 - d[i + 1];

        d[i+2] = 255 - d[i + 2];

    }



    return pixels;

};