댓글 : 이것은 첫 번째 기사이며 기술 내용이 없으므로 설명을 작성하지 않습니다 ...
<! doctype html>
<html>
<헤드>
<meta charset = "utf-8">
<title> html5 예 </title>
<스타일 유형 = "텍스트/CSS">
#Container {테두리 : 1px Solid #CCC; 너비 : 800px; 높이 : 600px; 위치 : 상대;}
캔버스 {위치 : 절대; 상단 : 0px; 왼쪽 : 0px; z-index : 1;}
</스타일>
</head>
<body>
<select>
<옵션 값 = "펜"> 연필 </옵션>
<옵션 값 = "줄"> 직선 </옵션>
<옵션 값 = "rect"> 사각형 </옵션>
<옵션 값 = "원"> 원 </옵션>
<옵션 값 = "타원"> 타원 </옵션>
</선택>
<div>
<canvas> </canvas>
<canvas> </canvas>
</div>
<script type = "text/javaScript">
var canvas = document.getElementById ( 'canvas');
var context = canvas.getContext ( '2d');
var _canvas = document.getElementById ( 'canvas_temp');
var _context = _canvas.getContext ( '2d');
var 도구 = document.getElementById ( '도구');
도구를 change = function (e) {
도구 [this.value] ();
};
var 도구 = {
펜 : function () {
this.reset ();
_canvas.onmousedown = function (e) {
_context.Moveto (E.Layerx, e.layery);
_canvas.onmouseMove = function (e) {
_context.lineto (e.layerx, e.layery);
_context.stroke ();
};
_canvas.onmouseup = function (e) {
_canvas.onmouseMove = null;
_canvas.onmouseup = null;
공구 .updata ();
};
};
},
선 : function () {
this.reset ();
_canvas.onmousedown = function (e) {
var _e = e;
_canvas.onmouseMove = function (e) {
_context.clearRect (0,0, Canvas.Width, Canvas.Height);
_context.beginpath ();
_context.moveto (_e.layerx, _e.layery);
_context.lineto (e.layerx, e.layery);
_context.stroke ();
_context.closepath ();
};
_canvas.onmouseup = function (e) {
_canvas.onmouseMove = null;
_canvas.onmouseup = null;
공구 .updata ();
};
}
},
rect : function () {
this.reset ();
_canvas.onmousedown = function (e) {
var _e = e;
_context.strokestyle = "#000";
_canvas.onmouseMove = function (e) {
_context.clearRect (0,0, Canvas.Width, Canvas.Height);
_context.strokerect (_e.layerx, _e.layery, e.layerx-_e.layerx, e.layery-_e.layery);
};
_canvas.onmouseup = function (e) {
_canvas.onmouseMove = null;
_canvas.onmouseup = null;
공구 .updata ();
};
}
},
원 : function () {
this.reset ();
_canvas.onmousedown = function (e) {
var _e = e;
_canvas.onmouseMove = function (e) {
_context.clearRect (0,0, Canvas.Width, Canvas.Height);
_context.beginpath ();
_context.arc (_e.layerx, _e.layery, e.layerx-_e.layerx, 0, math.pi*2, true);
_context.stroke ();
_context.closepath ();
};
_canvas.onmouseup = function (e) {
_canvas.onmouseMove = null;
_canvas.onmouseup = null;
공구 .updata ();
};
}
},
타원 : function () {
this.reset ();
_canvas.onmousedown = function (e) {
var _e = e;
_canvas.onmouseMove = function (e) {
var st = 0;
_context.clearRect (0,0, Canvas.Width, Canvas.Height);
_context.beginpath ();
_context.moveto (_e.layerx+(e.layerx-_e.layerx)*math.cos (st), _e.layery+(e.layerx-_e.layerx)*math.sin (st));
ST+= 1/180*MATH.PI;
for (var i = 0; i <360; i ++) {
_context.lineto (_e.layerx+(e.layerx-_e.layerx)*math.cos (st), _ e.layery+(e.layery-_e.layery)*math.sin (st));
ST+= 1/180*MATH.PI;
}
_context.stroke ();
_context.closepath ();
};
_canvas.onmouseup = function (e) {
_canvas.onmouseMove = null;
_canvas.onmouseup = null;
공구 .updata ();
};
}
},
재설정 : function () {
_canvas.onmousedown = null;
_canvas.onmouseup = null;
_canvas.onmouseMove = null;
},
업데이트 : function () {
Context.DrawImage (_canvas, 0, 0);
_context.clearRect (0, 0, canvas.width, canvas.height);
}
};
도구 [ 'pen'] ();
</스크립트>
</body>
</html>