HTML5 28
24. restore() - 저장된 스타일 복원

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() 메소드로..
Develop/canvas 2015.08.10

23. save() - 현재 스타일저장

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() 메소드를 호출할 때마다 순차적으로 ..
Develop/canvas 2015.08.10

20. nonzero - 필터규칙

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..
Develop/canvas 2015.08.10

17. gradient - 선과 면에 그라디언트 주기

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

티스토리툴바