sitelink1 http://blog.naver.com/shadowbug/220743398861 
sitelink2  
sitelink3  
sitelink4  
extra_vars5  
extra_vars6  

컨택스트의 속성

 

 

 설명 

 strokeStyle

 선의 테두리에 사용하는 색상이나 스타일을 정의한다.

 fillStyle

 

 globalAlpha

 투명도 설정

기본값은 1.0(완전 불투명)이고 0부터 1사이의 값을 가질 수 있다.

 lineWidth

 선의 두께를 지정한다. ( 기본값 1.0 )

 lineCap

 컨택스트에 그린 선의 끝 모양을 말한다. 

 

속성값

butt : 수직으로 꺽인 납작한 끝 모양 ( 기본값 )

round : 반원 모양이며 선의 두께가 지름이다.

square : 길이는 선 두께와 같고 폭은 선 두께의 반인 직사각형을 수직으로 꺽인 납작한 선 끝에 놓은 모양이다.

 

 lineJoin

두 선이 만나는 모서리의 모양을 처리한다.

 

join은 두 선이 만나는 모서리를 의미한다.

 

속성값

miter : 조인에 뽀족한 가장자리를 그린다 ( 기본값 )

bevel : 조인에 대각선 가장자리를 그린다.

round : 조인에 둥근 가장자리를 그린다.

 

 miterLimit

 

 shadowOffsetX

 

 shadowOffsetY

 

 shadowBlur

 

 shadowColor

 

 globalCompositeOperation

 그림이 겹친 상태일 때 캔버스에 이미 그려진 그림(밑그림)과 그리려는 그림(윗그림)간의 출력 관계를 설정한다.

 

속성값

copy : 밑 그림을 윗그림으로 덮어버린다.

destination-atop : 겹친 부분은 밑그림을 출력하고 겹치치 않은 부분은 윗그림을 출력한다.

destination-in : 겹친 부분만 밑 그림을 출력한다. 

destination-out : 겹치지 않은 밑그림만 출력한다.

destination-over : 밑 그림을 윗그림보다 위에 그린다.

lighter : 윗 그림과 밑그림을 합친다.

source-atop : 윗 그림은 겹친 부분만 출력한다.

source-in : 겹친 부분만 윗그림을 출력한다.

source-out : 겹치지 않은 부분에서 윗그림만 출력한다.

source-over : 윗 그림을 밑 그림보다 위에 그린다 ( 기본값 )

xor : 윗 그림과 밑 그림을 xor 한 것이다.

 

 font

 

 textAlign

 

 textBaseline 

번호 제목 글쓴이 날짜 조회 수
88 HTML5 강좌 12강 - HTML5 태그 - canvas 채우기 스타일,그라데이션 file 황제낙엽 2016.12.03 212
87 HTML5 강좌 11강 - HTML5 태그 - canvas 베지에곡선, 선 스타일 file 황제낙엽 2016.12.03 166
86 HTML5 강좌 10강 - HTML5 태그 - canvas 원그리기 file 황제낙엽 2016.12.03 202
85 HTML5 강좌 9강 - HTML5 태그 - canvas 다각형 file 황제낙엽 2016.12.03 127
84 HTML5 강좌 8강 - HTML5 태그 - canvas 선그리기 file 황제낙엽 2016.12.03 136
83 HTML5 강좌 7강 - HTML5 태그 - canvas 사각형 file 황제낙엽 2016.12.03 118
82 HTML5 강좌 6강 - HTML5 태그 - canvas #1 file 황제낙엽 2016.12.03 205
81 HTML5 강좌 5강 - HTML5 태그 - prograss,download file 황제낙엽 2016.12.03 130
80 HTML5 강좌 4강 - HTML5 태그 - mark,time,meter file 황제낙엽 2016.12.03 141
79 HTML5 강좌 3강 - HTML5 레이아웃 잡아보기 file 황제낙엽 2016.12.03 139
78 HTML5 강좌 2강 - HTML5 시맨틱웹을 위한 구성요소 file 황제낙엽 2016.12.03 346
77 HTML5 강좌 1강 - HTML5 개념 및 기본구조 file 황제낙엽 2016.12.03 131
76 HTTP 오류 코드의 종류 황제낙엽 2016.12.01 138
75 Multiple Canvas Layer 예제 file 황제낙엽 2016.08.23 128
74 Canvas 개요 황제낙엽 2016.08.22 177
73 Canvas 확대 file 황제낙엽 2016.08.22 136
72 Canvas setTransform 함수 황제낙엽 2016.08.22 148
71 Canvas 회전 file 황제낙엽 2016.08.22 152
70 Canvas 영역 선택 file 황제낙엽 2016.08.22 141
» Canvas CanvasRenderingContext2D Context 속성 황제낙엽 2016.08.22 91