Comentário: Este é o primeiro artigo, ele não tem conteúdo técnico, por isso não vou escrever nenhuma explicação ...
<! Doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> Exemplo HTML5 </title>
<style type = "text/css">
#container {borda: 1px Solid #ccc; largura: 800px; altura: 600px; posição: relativa;}
tela {posição: absoluto; topo: 0px; esquerda: 0px; z-index: 1;}
</style>
</head>
<Body>
<select>
<opção value = "Pen"> lápis </pption>
<option value = "line"> linha reta </pption>
<opção value = "ret"> retângulo </pption>
<opção value = "círculo"> círculo </pption>
<opção value = "ellipse"> elipse </pption>
</leclect>
<div>
<lVAs> </canvas>
<lVAs> </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 ferramentas = document.getElementById ('ferramentas');
ferramentas.onchange = function (e) {
ferramenta [this.value] ();
};
var ferramenta = {
caneta: 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;
ferramenta.updata ();
};
};
},
linha: 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;
ferramenta.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;
ferramenta.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;
ferramenta.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;
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;
ferramenta.updata ();
};
}
},
Redefinir: function () {
_Canvas.onMousedown = null;
_Canvas.onMouseUp = null;
_Canvas.OnMousEmove = null;
},
Atualização: function () {
context.Drawimage (_Canvas, 0, 0);
_context.clearrect (0, 0, Canvas.width, canvas.Height);
}
};
ferramenta ['caneta'] ();
</script>
</body>
</html>