تعليق: هذا هو المقال الأول ، وليس له محتوى فني ، لذلك لن أكتب أي تفسير ...
<! doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> html5 مثال </title>
<type type = "text/css">
#container {border: 1px solid #ccc ؛ العرض: 800px ؛ الارتفاع: 600px ؛ الموضع: النسبية ؛}
Canvas {الموضع: Absolute ؛ Top: 0px ؛ Left: 0px ؛ z-index: 1 ؛}
</style>
</head>
<body>
<select>
<Option Value = "Pen"> Pencil </soph>
<Option Value = "line"> خط مستقيم </orpion>
<Option Value = "rect"> strenge </soph>
<Option Value = "Circle"> Circle </Option>
<Option Value = "Ellipse"> Ellipse </soph>
</select>
<viv>
<Canvas> </tanvas>
<Canvas> </tanvas>
</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 = document.getElementById ('أدوات') ؛
tools.onchange = function (e) {
أداة [this.value] () ؛
} ؛
أداة var = {
القلم: وظيفة () {
this.Reset () ؛
_canvas.onmousedown = function (e) {
_context.moveto (E.Layerx ، E.Layery) ؛
_canvas.onmousemove = دالة (هـ) {
_context.lineto (E.Layerx ، E.Layery) ؛
_context.stroke () ؛
} ؛
_canvas.onmouseup = function (e) {
_canvas.onmousemove = null ؛
_canvas.onmouseup = null ؛
tool.updata () ؛
} ؛
} ؛
} ،
السطر: وظيفة () {
this.Reset () ؛
_canvas.onmousedown = function (e) {
var _e = e ؛
_canvas.onmousemove = دالة (هـ) {
_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 = دالة (هـ) {
_context.clearrect (0،0 ، canvas.width ، canvas.height) ؛
_Context.StrokeCt (_e.layerx ، _e.layery ، e.layerx-_e.layerx ، e.layery -_e.layery) ؛
} ؛
_canvas.onmouseup = function (e) {
_canvas.onmousemove = null ؛
_canvas.onmouseup = null ؛
tool.updata () ؛
} ؛
}
} ،
الدائرة: وظيفة () {
this.Reset () ؛
_canvas.onmousedown = function (e) {
var _e = e ؛
_canvas.onmousemove = دالة (هـ) {
_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 () ؛
} ؛
}
} ،
القطع الناقص: وظيفة () {
this.Reset () ؛
_canvas.onmousedown = function (e) {
var _e = e ؛
_canvas.onmousemove = دالة (هـ) {
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+(
ST+= 1/180*MATH.PI ؛
لـ (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 () ؛
} ؛
}
} ،
إعادة تعيين: function () {
_canvas.onmousedown = null ؛
_canvas.onmouseup = null ؛
_canvas.onmousemove = null ؛
} ،
تحديث: الدالة () {
context.drawImage (_canvas ، 0 ، 0) ؛
_context.clearrect (0 ، 0 ، canvas.width ، canvas.height) ؛
}
} ؛
أداة ['pen'] () ؛
</script>
</body>
</html>