Ready, Get Set, GO!

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 )

GuriZzang.com에 오시면 더 자세한 내용을 보실 수 있습니다. 채우기( fill() )등을 사용하는 경우 두가지의 내부 알고리즘을 이용할 수 있습니다. "nonzero": The non-zero winding rule, which is the default rule."evenodd": The even-odd winding rule. ctx.fill()의 경우 기본값인 ctx.fill('nonzero')와 동일 합니다. 아래의 샘플을 보시면 왼쪽은 evenodd로 채우기, 투명, 채우기, 투명이 적용되었으나 오른쪽은 기본설정인 nonzero가 적용되어 전체 색상이 칠해진 것을 확인할 수 있습니다. Source ?1234567891011121314151617181920212223function dr..

GuriZzang.com에 오시면 더 자세한 내용을 보실 수 있습니다.