JQuery Study 4 - 2011.05.11.

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

farbtastic12.zip

http://acko.net/dev/farbtastic