Ready, Get Set, GO!

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에 오시면 더 자세한 내용을 보실 수 있습니다.

GuriZzang.com에 오시면 더 자세한 내용을 보실 수 있습니다. .createPattern( img,type )캔버스 요소에 패턴 오브젝트를 생성 합니다. 글쓴 날자를 기준으로 파이어폭스는 repeat속성만 지원합니다. 캔버스 크기가 0x0픽셀일경우 오류가 발생 합니다.

GuriZzang.com에 오시면 더 자세한 내용을 보실 수 있습니다. .createLinearGradient( x1,y1,x2,y2 )선 혹은 면에 선형 그라디언트를 적용합니다..createRadialGradient( x1,y1,r1,x2,y2,r2 )인자 : x1,y1설명 : 안쪽 원형 그라디언트의 중심 좌표 입니다.인자 : r1설명 : 안쪽 원형의 반지름 입니다.인자 : x2,y2설명 : 바깥쪽 원형 그라디언트의 중심 좌표 입니다.인자 : r2설명 : 바깥쪽 원형의 반지름 입니다.원형 그라디언트는 두개의 원에 그라디언트 단계를 만든다고 생각하시면 됩니다. 시작되는 작은원과 종료되는 큰 원을 만든 후 그 두 색의 색단계를 표현하는 방식인데요. 하이라이트등의 표현은 시작 원의 크기와 좌표에 변화를 주시..

GuriZzang.com에 오시면 더 자세한 내용을 보실 수 있습니다. setLineDash( [int d, int m] )선의 점선모양 만들기

GuriZzang.com에 오시면 더 자세한 내용을 보실 수 있습니다. http://gurizzang.com/view/board/bbsView.asp?menuCode=45&bbsCode=36&bbsSeq=1140 lineJoin 도형을 이루는 선이나 호등의 연결지점(모서리)의 모양을 설정

guriZzang.com에서 더 많은 html5, canvas의 튜토리얼을 보실 수 있습니다.guriZzang.com 스터디블로그 바로가기 lineCap선의 끝점 보양을 결정.