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..
GuriZzang.com에 오시면 더 자세한 내용을 보실 수 있습니다. globalCompositeOperation캔버스에 그리려는 색이 그려져 있던 색과 겹쳐질때 어떤식으로 조합할지 지정합니다. 포토샵을 해보신 분들은 아시겠지만 레이어마다 블렌딩모드 라는 옵션이 있습니다. 그거와 비슷하다 보시면 될거 같습니다.globalCompositeOperation = type아래의 값 중에서 'source'라는 단어는 지금 캔버스에 그리려는 색을 말하며, 'desination'이라는 단어는 기존에 캔버스에 그려져 있던 색을 말합니다. 기본 동작은 'source-over" 입니다. copy : 새 도형만 그리고 나머지는 모두 제거한다.darker : 두 도형이 겹치는 부분에서는 두 색의 차이 값을 구하여 최종 색을..
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";..
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..
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..
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..
GuriZzang.com에 오시면 더 자세한 내용을 보실 수 있습니다. .rotate() .rotate( angle ) 객체를 angle만큼 회전시킵니다. 요소를 angle위치만큼 이동 시킵니다. 요소에 .rotate()를 적용할 경우 생각한것과 다른 위치에 요소가 위치해 있을 수 있습니다. 회전의 기준점이 canvas요소의 0,0위치이기 때문입니다. 요소의 중앙을 기준으로 회전을 시키고 싶을때에는 .translate()로 현재 canvas의 기준점을 요소의 중앙위치로 이동시켜 주어야 합니다. ?1234567ctx.translate(60, 60); // translate to rectangle center // x = x + 0.5 * width// y = y + 0.5 * heightctx.rotate..
GuriZzang.com에 오시면 더 자세한 내용을 보실 수 있습니다. .translate() .translate( x,y ) 객체를 x와 y만큼 이동시킵니다. ?12ctx.translate( 15,15 );ctx.rillRect( 10,10,20,20 );가령 .fillRect( 10,10,20,20 ) 만으로 사각형을 그릴경우 10,10 위치부터 20*20 사각형이 그려지게 됩니다.하지만 .translate( 15,15 )를 주게되면 가로세로 15씩 이동해서 실제 .fillRect( 35,35,20,20 )과 동일한 결과를 얻을 수 있습니다. Source ?123456789101112function draw() { var ctx = document.getElementById('canvas').getC..
- Total
- 57,919
- Today
- 6
- Yesterday
- 45
- 라즈베리파이
- 글자
- 글
- 튜토리얼
- 심포니
- Symfony
- GitLab
- rect
- stroke()
- 글쓰기
- 텍스트
- Canvas
- JavaScript
- 곡선
- 베지어
- Round
- 도형그리기
- measureText
- 캔버스
- Fill
- arc()
- fillText
- Bezier
- 배경색
- strokeText
- translate
- HTML5
- 자바스크립트
- save
- virtualhost