html5 canvas 使用示例
程序员文章站
2023-11-29 16:38:52
这是第一篇，没啥技术含量，所以也不写啥说明了..
... 10-10-22...
复制代码
代码如下:<!doctype html>
<html>
<head>
<meta 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;left:0px;z-index:1;}
</style>
</head>
<body>
<select id="tools">
<option value="pen">铅笔</option>
<option value="line">直线</option>
<option value="rect">矩形</option>
<option value="circle">圆形</option>
<option value="ellipse">椭圆</option>
</select>
<div id="container">
<canvas id="canvas" width="800" height="600"></canvas>
<canvas id="canvas_temp" style="z-index:2;" width="800" height="600"></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){
tool[this.value]();
};
var tool = {
pen: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();
};
};
},
line: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;
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();
};
}
},
reset:function (){
_canvas.onmousedown=null;
_canvas.onmouseup=null;
_canvas.onmousemove=null;
},
updata:function (){
context.drawimage(_canvas, 0, 0);
_context.clearrect(0, 0, canvas.width, canvas.height);
}
};
tool['pen']();
</script>
</body>
</html>