Commentaire: Ceci est le premier article, il n'a pas de contenu technique, donc je n'écrirai aucune explication ...
<! Doctype html>
<html>
<adal>
<meta charset = "utf-8">
<Title> HTML5 Exemple </TITME>
<style type = "text / css">
#Container {Border: 1px solide #ccc; largeur: 800px; hauteur: 600px; position: relative;}
toile {position: absolu; en haut: 0px; gauche: 0px; z-index: 1;}
</ style>
</ head>
<body>
<élect>
<Option Value = "Pen"> Crayon </ Option>
<Option Value = "Line"> Ligne droite </ Option>
<option value = "rect"> rectangle </ option>
<option valeur = "cercle"> cercle </ option>
<option valeur = "ellipse"> ellipse </opoption>
</lect>
<div>
<lebvas> </ canvas>
<lebvas> </ 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 outils = document.getElementById ('outils');
outils.onchange = fonction (e) {
Tool [this.value] ();
};
var outil = {
Pen: fonction () {
this.reset ();
_canvas.onmousedown = fonction (e) {
_Context.moveto (e.layerx, e.layery);
_Canvas.OnMouSEMOVE = fonction (e) {
_Context.lineto (e.layerx, e.layery);
_Context.stroke ();
};
_Canvas.onMouseUp = fonction (e) {
_Canvas.OnMouseMove = null;
_Canvas.onMouseUp = null;
tool.updata ();
};
};
},
ligne: function () {
this.reset ();
_canvas.onmousedown = fonction (e) {
var _e = e;
_Canvas.OnMouSEMOVE = fonction (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 = fonction (e) {
_Canvas.OnMouseMove = null;
_Canvas.onMouseUp = null;
tool.updata ();
};
}
},
rect: function () {
this.reset ();
_canvas.onmousedown = fonction (e) {
var _e = e;
_Context.strokestyle = "# 000";
_Canvas.OnMouSEMOVE = fonction (e) {
_Context.ClearRect (0,0, canvas.width, canvas.height);
_context.strokect (_e.layerx, _e.layery, e.layerx-_e.layerx, e.layery-_e.layery);
};
_Canvas.onMouseUp = fonction (e) {
_Canvas.OnMouseMove = null;
_Canvas.onMouseUp = null;
tool.updata ();
};
}
},
cercle: function () {
this.reset ();
_canvas.onmousedown = fonction (e) {
var _e = e;
_Canvas.OnMouSEMOVE = fonction (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 = fonction (e) {
_Canvas.OnMouseMove = null;
_Canvas.onMouseUp = null;
tool.updata ();
};
}
},
ellipse: function () {
this.reset ();
_canvas.onmousedown = fonction (e) {
var _e = e;
_Canvas.OnMouSEMOVE = fonction (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;
pour (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 = fonction (e) {
_Canvas.OnMouseMove = null;
_Canvas.onMouseUp = null;
tool.updata ();
};
}
},
reset: function () {
_Canvas.onmousedown = null;
_Canvas.onMouseUp = null;
_Canvas.OnMouseMove = null;
},
Mise à jour: fonction () {
context.DrawImage (_canvas, 0, 0);
_Context.ClearRect (0, 0, canvas.width, canvas.height);
}
};
Tool ['Pen'] ();
</cript>
</docy>
</html>