Комментарий: это первая статья, у нее нет технического контента, поэтому я не буду писать никаких объяснений ...
<! Doctype html>
<html>
<голова>
<meta charset = "utf-8">
<title> html5 Пример </title>
<стиль типа = "text/css">
#container {border: 1px solid #ccc; ширина: 800px; высота: 600px; положение: относительно;}
Canvas {position: Absolute; Top: 0px; слева: 0px; z-index: 1;}
</style>
</head>
<тело>
<select>
<option value = "pen"> карандаш </option>
<option value = "line"> прямая линия </option>
<option value = "rect"> rectangle </option>
<option value = "circle"> Circle </option>
<опция value = "ellipse"> ellipse </option>
</select>
<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 Tools = document.getElementById ('Tools');
tools.onchange = function (e) {
инструмент [this.value] ();
};
var tool = {
ручка: 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;
Tool.updata ();
};
};
},
line: 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;
Tool.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;
Tool.updata ();
};
}
},
Circle: 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;
Tool.updata ();
};
}
},
ellipse: 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;
для (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;
Tool.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'] ();
</script>
</body>
</html>