Komentar: Ini adalah artikel pertama, tidak memiliki konten teknis, jadi saya tidak akan menulis penjelasan ...
<! Doctype html>
<Html>
<head>
<meta charset = "UTF-8">
<title> contoh html5 </iteme>
<type style = "text/css">
#container {border: 1px solid #ccc; lebar: 800px; tinggi: 600px; posisi: relatif;}
Canvas {Position: Absolute; Top: 0px; kiri: 0px; z-index: 1;}
</tyle>
</head>
<body>
<CILECT>
<Option value = "Pen"> pensil </pection>
<Option value = "line"> Straight line </pection>
<Option value = "rect"> persegi panjang </tion>
<Option value = "Circle"> Circle </pection>
<Option value = "ellipse"> ellipse </pection>
</pilih>
<div>
<Canvas> </an Canvas>
<Canvas> </an Canvas>
</div>
<type skrip = "Teks/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) {
alat [this.value] ();
};
var tool = {
pena: 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 ();
};
};
},
baris: 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;
untuk (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 ();
};
}
},
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>