상세 컨텐츠

본문 제목

JQuery Study 4 - 2011.05.11.

Work/Study

by 물빛미르 2011. 5. 27. 16:39

본문

728x90
Canvas 관련 라이브러리
http://www.kineticjs.com/
http://guryjs.org/ 

 
SVG
기본크기가 없다.
width, height를 css에서 지정한다.
원하는 레이아웃만 선택 가능

Canvas
300 x 150 정도의 기본 크기가 존재한다.
css에서 크기 변경을 할 경우 비율이 깨지게 된다.
캔버스 내부의 그림은 선택하기가 어렵다.

 
SVG 그림 그리기
소스에서 좌표를 지정해서 직접 그림을 그린다.
대문자 : 절대좌표, 소문자: 상대좌표

ex)
<svg>
<path d="M 20,20 
L 120,20  
L 120,120
L 20, 120 
Z" fill="#00bfff" > 
<path d="m 20,20 
l 100,0 
l 0,100
l -100, 0
z" fill="#00bfff" />
 <polygon fill="#EBEBEB" points="256,268.217 195.91,268.217 191.76,221.716 256,221.716 256,176.305 255.843,176.305 142.132,176.305 143.219,188.488 154.38,313.627 256,313.627"/> 
</svg>
 
var canvas = $("canvas")[0];
jQUery에는 canvas가 없으므로 javascript객체로 얻어온다. 배열로 리턴되기 때문에 캔버스가 하나인 경우에도 [0]으로 지정해 주어야 한다.

Canvas
- gradient / shadow

canvas에서 context를(ctx) 얻은 다음 컨텍스트에 그린다.
var gradient = ctx.createLinearGradient(0,0,200,0);
gradient.addColorStop(0, "red"); 
gradient.addColorStop(1, "blue"); 

ctx.shadowOffsetX=10;
ctx.shadowOffsetY=10;
ctx.shadowBlur=20;
ctx.shadowColor="black";

- image 삽입
var img = new Image();
img.src = "img/1.jpg";
img.onload = function(){
ctx.drawImage(img, 0,0,160,120);


- 기타 변환관련
ctx.rotate(Math.PI* 30 /180);
ctx.scale(2,2);
ctx.translate(100,100);
ctx.clip(); - drawImage 위에 도형을 그린다음 clip()을 하면 마스크 효과가 난다.

Color picker plug-in

http://acko.net/dev/farbtastic 
728x90

'Work > Study' 카테고리의 다른 글

보안관련 정리  (0) 2011.07.15
파일내용 일괄 변경  (0) 2011.06.30
JQuery Study 3 - 2011.05.09.  (0) 2011.05.27
JQuery Study 2 - 2011.04.27.  (0) 2011.04.27
JQuery Study 1 - 2011.04.25.  (0) 2011.04.26

관련글 더보기