jsgraphics 그래 픽 라 이브 러 리

http://www.karlson.ru/jsgraphics/html/index.html
이 JavaScript 그래 픽 라 이브 러 리 는 웹 페이지 에 원, 타원, 사선, 접 는 선, 다각형 (삼각형, 사각형 포함) 을 동적 으로 그 릴 수 있 습 니 다.바 텀 은 대량의 1px * 1px 의 DIV 를 생 성하 여 실현 하 는 동시에 연속 적 인 픽 셀 을 최적화 시 켜 필요 한 DIV 를 최대한 줄 였 기 때문에 좋 은 성능 을 가지 고 있 습 니 다. 물론 자바 2D, GDI +, OpenGL, DirectX, Flash, SVG, VML 과 HTML Canvas 와 비교 할 수 없습니다.사이트:http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm 。LGPL 프로 토 콜 로 발표 합 니 다.지원 하 는 브 라 우 저: Linux: Browsers with Gecko - Engine (Mozilla, Netscape 6 +, Galeon), Konqueror, Opera 5, 6 and 7 +. Windows: Gecko - Browsers, IE 4, 5 and 6, Opera 5, 6 and 7 +.  Mac: Safari, Gecko - Browsers, Opera, partially IE. 사용 방법:

1、  ，         ：<script type="text/javascript" src="wz_jsgraphics.js"></script>
2、    Div    ：<div id="myCanvas" style="position:relative;height:250px;width:100%;"></div>
3、 JavaScript     ：
<script type="text/javascript"> 
<!--   ： 
var jg = new jsGraphics("myCanvas"); 
//--> 
</script> 
<script type="text/javascript"> 
<!--   ： 
var cnv = document.getElementById("myCanvas"); 
var jg = new jsGraphics(cnv); 
//--> 
</script>  

jsgraphics 그래 픽 라 이브 러 리 기본 함수 설명 설정 화필 색상  setColor("#hexcolor"); 예제: jg. setColor ("\ # ff 0000");또는 jg. setColor ("red");펜 색상 이 설정 되 어 있 지 않 으 면 기본적으로 검은색 으로 그립 니 다.인자 가 부족 할 때 오류 가 발생 합 니 다.인자 가 비 색상 값 일 때 도 오류 가 발생 할 수 있 습 니 다.화필 너비 설정 setStroke(number); 예제: jg. setStroke (3);또는 jg. setStroke (Stroke. DOTTED);  //점선 이 붓 너비 가 설정 되 어 있 지 않 으 면 기본 값 은 1 점 너비 입 니 다.너 비 는 한 쪽 에서 다른 쪽 까지 의 점 수 를 3 으로 설정 하면 5 점 이 아니 라 정확 한 3 점 이다.stroke. dotted 는 점선 이 고 선의 너 비 는 1 이다.stroke. dotted 도 - 1 로 대체 할 수 있 습 니 다. 다른 마이너스 일 때 는 모두 1 시 실선 입 니 다.선 을 긋다  drawLine(x1, y1, x2, y2); 예제: jg. drawLine (20, 50, 453, 40);뒤에 있 는 점 좌표 가 제공 되 지 않 으 면 틀 리 지 않 지만 결과 가 정확 하지 않 습 니 다. 점 모드 를 stroke. dotted 로 설정 할 때 점 을 그 리 는 것 과 같 고 다른 것 은 Y 축 으로 달 려 갑 니 다.접 는 선 을 긋다  drawPolyLine(xpoints, ypoints); 예제: var xpoints = new Array (10, 85, 93, 60);var ypoints = new Array(50, 10, 105, 87); jg.drawPolyLine(xpoints, ypoints); x 좌표 가 y 좌표 수량 과 일치 하지 않 으 면 오류 가 발생 하지 않 지만 일치 하지 않 는 점 은 선 을 긋 지 않 고 복잡 한 점 만 그립 니 다.그림틀   drawRect(x, y, width, height); 예제: jg. drawRect (20, 50, 70, 140);실제 폭 은 width + pixel 이지 width + 2 * pixel 이 아 닙 니 다.중간 공백의 너 비 는 width - pixel 입 니 다.정점 은 선 이 넓 든 항상 (x, y).뒤의 너비 와 높이 가 부족 하여 몇 개의 난잡 한 점 을 그 렸 다.충전 영역  fillRect(x, y, width, height); 예제: jg. fillRect (20, 50, 453, 40);drawrect 와 달리 실제 폭 은 width 입 니 다.아래 는 두 가지 색 의 상 자 를 그리고 중간 에는 픽 셀 의 배경 색 을 띠 고 있다.jg.setStroke(3); jg.drawRect(20, 50, 70, 140); jg.setColor("blue"); jg.fillRect(24, 54, 65, 135); 임의의 다각형 을 그리다.  drawPolygon(xpoints, ypoints); 예제: var xpoints = new Array (10, 85, 93, 20);var ypoints = new Array(50, 10, 105, 87); jg.drawPolygon(xpoints, ypoints); 매개 변수 중 마지막 점 이 일치 하지 않 으 면 닫 히 지 않 고 접 는 선 을 그립 니 다.임의의 다각형 채 우기  fillPolygon(xpoints, ypoints); 예제: jg. fillPolygon (new array (20, 85, 93, 40), new array (50, 50, 15, 87);좋아, 이게 다 정확하게 채 워 질 수 있어.타원 을 그리다    drawEllipse(x, y, width, height); 예제: jg. drawEllipe (20, 50, 70, 140);또는 jg. drawOval (20, 50, 70, 140);원 을 그 리 려 면 너비 와 높이 가 같 으 면 된다.타원 을 채우다   fillEllipse(x, y, width, height); 예제: jg. fillEllipe (20, 50, 71, 141);또는 jg. fillOval (20, 50, 71, 141);호 를 그리다    fillArc(x, y, width, height, start-angle, end-angle); 예시: jg. fillArc (20, 20, 41, 12, 270.0, 220.0);항상 앞의 각도 에서 시계 방향 으로 뒤의 각도 로 돌 립 니 다. 앞의 각도 가 뒤의 각도 보다 크 더 라 도 글꼴 을 설정 합 니 다.   setFont("font-family", "size+unit", style); 출력 텍스트 drawString ("text", x, y);예제: jg. setFont ("arial", "15px", Font. ITALIC BOLD);jg.drawString("some text", 20, 50); 글꼴 스타일 은 다음 과 같은 몇 가지 값 이 있 습 니 다: plain, bold, italic, italicbold、bold_italic 고정 영역 출력 텍스트   drawStringRect("text", x, y, width, alignment); 예제: jg. setFont ("verdana", "11px", font. bold);jg.drawStringRect("text", 20, 50, 300, "right"); alignment 의 내용 은 css 에서 text - align 의 내용 입 니 다: left, right, center, justify 출력 이미지 파일   drawImage("src", x, y, width, height); 예제: jg. drawImage ("dog. jpg", 20, 50, 100, 150);너비 와 높이 가 있 으 면 그림 을 늘 리 거나 압축 하고 없 으 면 그림 의 크기 를 표시 합 니 다.그린 결과 가 나 와 요.    paint(); 예제: jg. paint ();이상 의 그림 코드 는 이 문구 에 이 르 러 서 야 표 시 됩 니 다.화판 을 청소 하 다   clear(); 예제: jg. clear ();인쇄 가능  setprintable(true); 예제: jg. setprintable (true);인쇄 할 수 있 는 설정 이 없 으 면 그 려 진 그림 을 인쇄 할 수 없습니다.true 로 설정 해 야 paint 에서 나 온 그림 을 인쇄 할 수 있 습 니 다.false 로 설정 하면 이 부분의 paint 는 인쇄 할 수 없습니다.텍스트 와 그림 은 아무리 설정 해도 인쇄 할 수 있 습 니 다.예제 html 파일

<html>
<head>
<title>test</title>
<script language="javascript" src="wz_jsgraphics.js" type="text/javascript"></script>
</head>
<body>
<input id="butdraw" value="draw" type="button" onclick="butdraw_click();" />
<div id="test" style="color:blue; left: 0px; overflow: visible; width: 400px; position: relative; top: 0px; height: 250px;background:#eeeeee; "></div>
<script type="text/javascript">
var jg=new jsGraphics("test");
function butdraw_click()
{
if (window.event) event.cancelbubble = true;
jg.setColor("#ff00ff");
jg.setStroke(1);
jg.setPrintable(false);
jg.drawLine(10, 10, 100, 100);
var xpoints = new Array(10, 85, 93, 60);
var ypoints = new Array(50, 10, 105, 87);
jg.drawPolyLine(xpoints, ypoints);
jg.setStroke(3);
jg.drawRect(20, 50, 70, 140);
jg.setColor("blue");
jg.fillRect(24, 54, 65, 135);
var xpoints = new Array(10, 85, 33, 20);
var ypoints = new Array(50, 30, 105, 87);
jg.drawPolygon(xpoints, ypoints);
jg.fillPolygon(new Array(20, 85, 93, 40), new Array(50, 50, 15, 87));
jg.drawEllipse(20, 50, 70, 140);
jg.drawOval(20, 50, 70, 70);
jg.fillEllipse(20, 50, 71, 141);
jg.fillOval(20, 50, 71, 141);
jg.fillArc(20, 20, 40, 40, 220.0, 270.0);
jg.setFont("arial","15px",Font.ITALIC_BOLD);
jg.setFont("arial", "15px", Font.PLAIN);
jg.drawString("some text", 20, 50);
jg.drawRect(20, 50, 300, 140);
jg.setFont("verdana", "11px", Font.BOLD);
jg.drawStringRect("text", 20, 50, 300, "right");
jg.drawImage("but04.gif", 20, 50);
jg.paint();
//jg.clear();
}
</script>
</body>
</html>