Ready, Get Set, GO!

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에 오시면 더 자세한 내용을 보실 수 있습니다. .transform() 오브젝트를 회전 시켜 줍니다.

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..

GuriZzang.com에 오시면 더 자세한 내용을 보실 수 있습니다. .restore() .save()가 실행된 역순으로 스타일이 복구됩니다. .save()로 저장되는 상태값은 아래와 같습니다. strokeStyle fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, lineDashOffset, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation, font, textAlign, textBaseline, direction, imageSmoothingEnabled. save() 메소드를 호출할 때마다 순차적으로 저장이 되며 .restore() 메소드로..

GuriZzang.com에 오시면 더 자세한 내용을 보실 수 있습니다. .save() .save()가 실행되기 전 canvas의 상태값을 저장(캡쳐)합니다. 복수의 캡쳐가 가능합니다. .save()로 저장되는 상태값은 아래와 같습니다. strokeStyle fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, lineDashOffset, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation, font, textAlign, textBaseline, direction, imageSmoothingEnabled. save() 메소드를 호출할 때마다 순차적으로 ..

GuriZzang.com에 오시면 더 자세한 내용을 보실 수 있습니다. .drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)이미지를 자릅니다.

GuriZzang.com에 오시면 더 자세한 내용을 보실 수 있습니다. .drawImage( img,x,y,width,height )