コメント:これは最初の記事であり、技術的な内容がないので、説明を書きません...
<!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>