コメント：これは最初の記事であり、技術的な内容がないので、説明を書きません...
<！doctype html>
<html>
<head>
<メタcharset = "utf-8">
<title> html5例</title>
<style type = "text/css">
#container {border：1px solid #ccc; width：800px; height：600px; position：relative;}
canvas {position：absolute; top：0px;左：0px; z-index：1;}
</style>
</head>
<body>
<select>
<オプション値= "PEN">鉛筆</option>
<オプション値= "line">直線</option>
<オプション値= "rect"> rectangle </option>
<オプション値= "circle"> circle </option>
<オプション値= "ellipse"> ellipse </option>
</select>
<div>
<canvas> </canvas>
<canvas> </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 tools = document.getElementById（ 'Tools'）;
tools.onchange = function（e）{
ツール[this.value]（）;
};
var tool = {
ペン：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（）;
};
};
}、
行：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（）;
};
}
}、
円：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;
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;
tool.updata（）;
};
}
}、
リセット：function（）{
_canvas.onmousedown = null;
_canvas.onmouseup = null;
_canvas.onmousemove = null;
}、
更新：function（）{
Context.Drawimage（_Canvas、0、0）;
_Context.ClearRect（0、0、canvas.width、canvas.height）;
}
};
ツール['Pen']（）;
</script>
</body>
</html>