html5 canvas 使用示例

程序员文章站 2024-02-11 10:07:04

这是第一篇，没啥技术含量，所以也不写啥说明了.. ... 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>

上一篇：新浪微博如何使用悄悄关注呢?

下一篇： iOS将相册中图片上传至服务器的方法

html5 canvas 使用示例