Kommentar: Dies ist der erste Artikel, es hat keinen technischen Inhalt, daher werde ich keine Erklärung schreiben ...
<! DocType html>
<html>
<kopf>
<meta charset = "utf-8">
<title> html5 Beispiel </title>
<style type = "text/css">
#Container {Border: 1px solide #ccc; Breite: 800px; Höhe: 600px; Position: Relativ;}
Canvas {Position: absolut; ober: 0px; links: 0px; Z-Index: 1;}
</style>
</head>
<body>
<Selech>
<Option Value = "Pen"> Bleistift </Option>
<Option Value = "Zeile"> gerade Linie </Option>
<Option value = "rect"> rechteck </option>
<option value = "circle"> circle </option>
<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 = Funktion (e) {
Tool [this.Value] ();
};
var Tool = {
stift: 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 = Funktion (e) {
_canvas.onmousemove = null;
_canvas.onmouseUp = null;
Tool.Updata ();
};
};
},
Zeile: 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 = Funktion (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 = Funktion (e) {
_canvas.onmousemove = null;
_canvas.onmouseUp = null;
Tool.Updata ();
};
}
},
Kreis: 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 = Funktion (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;
für (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 = Funktion (e) {
_canvas.onmousemove = null;
_canvas.onmouseUp = null;
Tool.Updata ();
};
}
},
Reset: function () {
_canvas.onmouseDown = null;
_canvas.onmouseUp = null;
_canvas.onmousemove = null;
},
update: function () {
context.drawimage (_canvas, 0, 0);
_context.clearRect (0, 0, canvas.width, canvas.height);
}
};
Tool ['Pen'] ();
</script>
</body>
</html>