Comentario: Este es el primer artículo, no tiene contenido técnico, por lo que no escribiré ninguna explicación ...
<! Doctype html>
<html>
<Evista>
<meta charset = "utf-8">
<title> HTML5 Ejemplo </title>
<style type = "text/css">
#Container {border: 1px sólido #ccc; ancho: 800px; altura: 600px; posición: relativo;}
lienzo {posición: absoluto; superior: 0px; izquierda: 0px; z-index: 1;}
</style>
</ablo>
<Body>
<select>
<opción value = "Pen"> lápiz </opción>
<opción valor = "línea"> línea recta </opción>
<opción valor = "rect"> rectangle </ppection>
<opción valor = "círculo"> círculo </opción>
<opción valor = "ellipse"> ellipse </ppection>
</select>
<div>
<Canvas> </Canvas>
<Canvas> </Canvas>
</div>
<script type = "text/javaScript">
var lienvas = document.getElementById ('Canvas');
var context = Canvas.getContext ('2d');
var _canvas = document.getElementById ('Canvas_temp');
var _context = _canvas.getContext ('2d');
var herramientas = document.getElementById ('herramientas');
Tools.onchange = function (e) {
herramienta [this.Value] ();
};
herramienta var = {
Pen: 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 ();
};
};
},
línea: 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: functer () {
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 ();
};
}
},
círculo: 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;
para (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 ();
};
}
},
restablecer: function () {
_canvas.onmousedown = null;
_canvas.onmouseUp = null;
_canvas.onmouseMove = null;
},
actualización: function () {
context.DrawImage (_canvas, 0, 0);
_Context.ClearRect (0, 0, Canvas.Width, Canvas.Height);
}
};
herramienta ['Pen'] ();
</script>
</body>
</html>