2015/08/10 22

CSS3 Animation - 에니메이션

GuriZzang.com에 오시면 더 자세한 내용을 보실 수 있습니다. CSS3 기능중 상당히 재미 있는 기능이었는데요.javascript중에서도 jQuery에서나 (javascript로 만들수도 있지만.. 기본 지원은 아니니까요~) 써봤던 Animation 기능 입니다.일단. 샘플을 하나 보시죠. Source ?123456789101112131415161718192021222324252627282930313233343536373839404142 Note: This example does not work in Internet Explorer 9 and earlier versions. Demo 위의 예제는 단지 CSS만으로 이루어진 에니메이션 입니다.javascript로 복잡하게 했던 에니메이션 기능을 C..

Develop/CSS 2015.08.10

34. requestAnimationFrame() - setInterval()과 동일

GuriZzang.com에 오시면 더 자세한 내용을 보실 수 있습니다. Syntaxwindow.requestAnimationFrame(callback); ParameterscallbackA parameter specifying a function to call when it's time to update your animation for the next repaint. The callback has one single argument, a DOMHighResTimeStamp, which indicates the current time (the time returned from window.performance.now() ) for when requestAnimationFrame starts to fire..

Develop/canvas 2015.08.10

33 .clip() - 잘라내기

GuriZzang.com에 오시면 더 자세한 내용을 보실 수 있습니다. Syntaxctx.clip(); 잘라내기 경로는 캔버스 도형과 비슷하지만, 포토샵의 마스크 등과 같은 의미 입니다. 예를들어 배경 이미지를 별 모양으로 만들고 싶을때 이미지 위에 별모양의 도형을 그린 후 clip()을 사용하면 배경이미지가 별모양 만큼만 보여지는 효과 입니다. 아래의 예제는 간단한 사각형와 원으로 clip() 구현한 예제 입니다.먼저 원을 그린 후 원을 마스크로 만듭니다.이후에 그려지는 오브젝트는 원 마스크 영역에서만 보여지게 됩니다.그럴경우 원을 그리기 전 ctx.save(); 마스크 오브젝트 그리기를 완료한 후 ctx.restore();를 해주시면 됩니다.하지만... 보기보다 마스크영역의 단면이 지저분 하네요. 뜯..

Develop/canvas 2015.08.10

32. globalCompositeOperation - 색상 블렌딩모드 (합성)

GuriZzang.com에 오시면 더 자세한 내용을 보실 수 있습니다. globalCompositeOperation캔버스에 그리려는 색이 그려져 있던 색과 겹쳐질때 어떤식으로 조합할지 지정합니다. 포토샵을 해보신 분들은 아시겠지만 레이어마다 블렌딩모드 라는 옵션이 있습니다. 그거와 비슷하다 보시면 될거 같습니다.globalCompositeOperation = type아래의 값 중에서 'source'라는 단어는 지금 캔버스에 그리려는 색을 말하며, 'desination'이라는 단어는 기존에 캔버스에 그려져 있던 색을 말합니다. 기본 동작은 'source-over" 입니다. copy : 새 도형만 그리고 나머지는 모두 제거한다.darker : 두 도형이 겹치는 부분에서는 두 색의 차이 값을 구하여 최종 색을..

Develop/canvas 2015.08.10

31. measureText() - 글자의 넓이 반환

GuriZzang.com에 오시면 더 자세한 내용을 보실 수 있습니다. Syntaxctx.measureText(text);ParameterstextThe text to measure.Return valueA TextMetrics object. Source ?12345678910111213141516function draw() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.font = "48px serif"; ctx.fillText("Hello world", 10, 50); ctx.font = "48px serif"; ctx.strokeText("Hello world", 10, 100); ctx.font = "48px serif";..

Develop/canvas 2015.08.10

30. strokeText() - 라인으로 글쓰기

GuriZzang.com에 오시면 더 자세한 내용을 보실 수 있습니다. Drawing text캔버스 영역에 텍스트를 그려 줍니다.fillText(text, x, y [, maxWidth])좌표 x,y를 시작으로 text를 그립니다. [maxWidth]는 생략가능하며 text 최대넓이를 제한합니다.strokeText(text, x, y [, maxWidth])좌표 x,y를 시작으로 text 라인을 그립니다. [maxWidth]는 생략가능하며 text 최대넓이를 제한합니다. 아래의 예제는 .fillText(), .strokeText(), measureText(), 최대넓이 지정순 입니다. Source ?12345678910111213141516function draw() { var ctx = document..

Develop/canvas 2015.08.10

29. fillText() - 글자그리기

GuriZzang.com에 오시면 더 자세한 내용을 보실 수 있습니다. Drawing text캔버스 영역에 텍스트를 그려 줍니다.fillText(text, x, y [, maxWidth])좌표 x,y를 시작으로 text를 그립니다. [maxWidth]는 생략가능하며 text 최대넓이를 제한합니다.strokeText(text, x, y [, maxWidth])좌표 x,y를 시작으로 text 라인을 그립니다. [maxWidth]는 생략가능하며 text 최대넓이를 제한합니다. 아래의 예제는 .fillText(), .strokeText(), measureText(), 최대넓이 지정순 입니다. Source ?12345678910111213141516function draw() { var ctx = document..

Develop/canvas 2015.08.10

27. scale() - 크기확대/축소

GuriZzang.com에 오시면 더 자세한 내용을 보실 수 있습니다. .scale() .scale( x, y ) 객체의 정보들(x,y좌표, 가로세로 길이등)을 가로는 x만큼, 세로는 y 만큼 곱해줍니다. ?12345ctx.fillRect( 1,5,10,10 );//x좌표 1, y좌표 5 지점에서 가로10 세로10 크기의 사각형을 그려줍니다.ctx.scale( 10,3 ); //가로10, 세로3만큼 확대ctx.fillRect( 1,5,10,10 );//x좌표 10, y좌표 3, 가로 100, 세로 30 크기의 사각형을 그려줍니다.값이 1일경우 원본사이즈이며 음수로 갈경우 해당 축을 기준으로 반전 됩니다. Source ?1234567891011121314function draw() { var ctx = d..

Develop/canvas 2015.08.10