HTML5 canvas basic tutorial

1. The web
is
your
<canvas>
NHN NEXT
박 신 영

3. <canvas>

4. 스크립트 언어로(=코딩으로) 그림을 그린다

5. 뭔 짓이야…… 코딩으로 그림을 왜……

6. 생각보다 굉장한 일들이
가능해집니다
http://pictom.at/en/index.html
https://getbeagle.co/
http://tympanus.net/Tutorials/PrismEffectSlider/index3.html
http://jabtunes.com/labs/boidsnbuildings/
http://www.canvasdemos.com/type/games/
http://spielzeugz.de/html5/liquid-particles.html
http://motionemotion.herokuapp.com/
http://www.feedtank.com/labs/html_canvas/
세상은_넓고_굇수는_많다.reference
(canvas 이외에 다른 요소들도 함께 사용한 예제들도 있어요)

7. 굇수로 가는 천릿길도 basic부터 :)
일단 만듭시다, <canvas>

8. !
<canvas id=“testCanvas”></canvas>
!
html에는 이것만! 나머지는 모두 js에서 이루어집니다.
사이즈 지정이 필요할 경우 width, height 속성을 추가 (기본사이즈는 300px * 150px)

9. canvas 지원여부 확인하기
오래된 브라우저(원수같은 IE8이라든가…)에서는 canvas를 지원하지 않을 수 있습니다.
상세한 사항은 http://caniuse.com/#search=canvas 여기에서 확인하고 사용해주세요.
!
!
canvas를 지원하지 않을 경우 대신 보여줄 내용을 써주세요
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_usage 의
fallback content를 참조해주세요.
!
!
CSS는 canvas의 width/height를 바꿀 수 있지만,
imageData는 바꿀 수 없습니다
canvas에서는 안에 있는 모든 픽셀에 대한 데이터를 조작할 수 있습니다. 이 데이터는 1차원 array로 가져오며,
array의 크기는 CSS에 지정되어 있는 크기가 아니라 canvas엘리먼트의 속성으로 지정되어 있는 width/height
를 기준으로 만들어집니다.
troubleshooting

10. 캔버스에 사각형 그리기
1

11. var context = canvas.getContext(“2d”);
//우선 html에 있는 canvas를 가져오고
var canvas = document.getElementById(“testCanvas”);
//canvas의 rendering context를 가져옵니다, 2d로!

12. context.fillStyle = 원하는 색;
context.fillRect( x, y, width, height );
http://codepen.io/fairesy/pen/XbXQeg?editors=101

14. 캔버스에 이미지 그리기
2

15. context.drawImage( img, x, y );
context.drawImage( img, x, y, width, height );
//그냥 그려!
//줄이거나 늘리거나
http://codepen.io/fairesy/pen/oXbOey?editors=101

16. ERROR! Canvas tainted by cross origin data
!
이미지 src를 웹주소 링크나 같은 서버 내에서 가져오는 것이 아니라,
<img>태그에서 가져오거나 로컬경로를 그대로 쓰는 경우 canvas에
서 이루어지는 조작들이 불가능합니다. 무려 SecurityError.
!
!
https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image
https://blog.codepen.io/2013/10/08/cross-domain-images-tainted-canvas/
troubleshooting

17. 픽셀을 조물조물
3

18. 우리는
캔버스를
“한 픽셀 한 픽셀”
조물조물
만질 수 있습니다

19. var imageData
= context.getImageData( 0, 0, canvas.width, canvas.height );
// 일단 이미지 정보를 가지고 옵니다
//시작점 x, y, 데이터를 가져올 영역의 너비, 높이

20. //이미지 데이터에서 우리가 실제로 만지작거릴 수 있는 픽셀들을 뽑아옵니다.
var pixelData = imageData.data;
var numPixels = imageData.width * imageData.height;
//이미지를 구성하고 있는 픽셀의 총 개수

21. var pixelData의 속사정은 이래요,
r g b a r g b a r g b …
1번째 픽셀의 색상정보
2번째 픽셀의 색상정보
= 1차원 array!

22. canvas
context
imageData
r g b a r g b a …
data

23. 그래서 우리는 루프를 돕니다
모든 픽셀을 조물조물 하기 위해서-
for( var i=0; i < numPixels; i++ ){
!
//각 픽셀의 r, g, b 수정
!
}

24. for( var i=0; i < numPixels; i++ ){
//각 픽셀의 r, g, b 값
var r = pixelData[ i*4 ];
var g = pixelData[ i*4 + 1 ];
var b = pixelData[ i*4 + 2 ];
}

25. for( var i=0; i < numPixels; i++ ){
//각 픽셀의 r, g, b 값
var r = pixelData[ i*4 ];
var g = pixelData[ i*4 + 1 ];
var b = pixelData[ i*4 + 2 ];
!
pixelData[ i*4 ] = i번째 픽셀의 r값을 이렇게 ;
pixelData[ i*4 + 1 ] = g값을 저렇게 ;
pixelData[ i*4 + 2 ] = b값을 요렇게 ;
}

26. for( var i=0; i < numPixels; i++ ){
//각 픽셀의 r, g, b 값
var r = pixelData[ i*4 ];
var g = pixelData[ i*4 + 1 ];
var b = pixelData[ i*4 + 2 ];
!
pixelData[ i*4 ] = i번째 픽셀의 r값을 이렇게 ;
pixelData[ i*4 + 1 ] = g값을 저렇게 ;
pixelData[ i*4 + 2 ] = b값을 요렇게 ;
}
context.putImageData( imageData, 0, 0 );
이렇게 저렇게 요렇게 다 했으면
캔버스에 조물조물한 데이터를 뿌려줍니다

27. 이제 5가지 필터를 만들 수 있어요

28. http://codepen.io/fairesy/pen/eNJaRK?editors=001

29. “이렇게 저렇게 요렇게” 부분에 따라
효과가 달라집니다

30. invert
R = 255 - r;
G = 255 - g;
B = 255 - b;
grayscale
gray = (r + g + b) / 3
R = G = B = gray;

31. sepia
R = r * 0.393 + g * 0.769 + b * 0.189;
G = r * 0.349 + g * 0.686 + b * 0.168;
B = r * 0.272 + g * 0.534 + b * 0.131;

32. lighten / darken
R = offset * r;
G = offset * g;
B = offset * b;
R = r + offset;
G = g + offset;
B = b + offset;
OR
0 < offset < 1 : darken
1 < offset : lighten

33. 참고링크 + 더 공부하기
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_usage
http://www.w3schools.com/html/html5_canvas.asp
!
http://code.tutsplus.com/series/canvas-from-scratch--net-19650
http://www.qoncious.com/questions/how-load-image-html5-canvas-and-do-pixel-manipulation
!
http://www.html5rocks.com/en/tutorials/canvas/imagefilters/
!
http://davidwalsh.name/canvas-demos
http://thecodeplayer.com/walkthrough/make-a-particle-system-in-html5-canvas
http://tympanus.net/codrops/2015/03/31/prism-effect-slider-canvas/