复制代码 代码如下:
<!doctype html>
<html>
<head>
<meta chart=”utf-8″>
<title>html5示例&新年行动lt;/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>
<lect id=”tools”>
<option value=”pen”>铅笔</option>
<option value=̶经典签名语录1;line”>直线</option>
<option value=”rect”>矩形</option>
<option 精彩片段value=”circle”>圆形</option>
<option value=”ellip”>椭圆</option>
</lect>
<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.ret();
_canvas.onmoudown=function (e){
_context.moveto(e.layerx,e.layery);
_canvas.onmoumove=function (e){
_context.lineto(e.layerx,e.layery);
_context.stroke();
};
_canvas.onmouup=function (e){
_canvas.onmoumove=null;
_canvas.onmouup=null;
tool.updata();
};
};
},
line:function (){
this.ret();
_canvas.onmoudown=function (e){
var _e = e;
_canvas.onmoumove=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.clopath();
};
_canvas.onmouup=function (e){
_canvas.onmoumove=null;
_canvas.onmouup=null;
tool.updata();
};
}
},
rect:function (){
this.ret();
_canvas.onmoudown=function (e){
var _e = e;
_context.strokestyle=”#000″;
_canvas.onmoumove=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.onmouup=function (e){
_canvas.onmoumove=null;
_canvas.onmouup=null;
tool.updata();
};
}
},
circle:function (){
this.ret();
_canvas.onmoudown=function (e){
var _e = e;
_canvas.onmoumove=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.clopath();
};
_canvas.onmouup=function (e){
_canvas.onmoumove=null;
_canvas.onmouup=null;
tool.updata();
};
}
化学沉淀表
},
ellip:function (){
this.ret();
_canvas.onmoudown=function (e){
var _e = e;
_canvas.onmoumove=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.clopath();
};
_canvas.onmouup=funct英语诗歌ion (e){
_canvas.onmoumove=null;
_canvas.onmouup=null;
tool.updata();
};
}
},
ret:function (){
_canvas.onmoudown=null;
_canvas.onmouup=null;
_canvas.onmoumove=null;
},
updata:function (){
context.drawimage(_canvas, 0, 0);
_context.clearrect(0, 0, canvas.width, canvas.height);
}
};
tool[‘pen’]();
</script>
</body>
</html>
本文发布于:2023-04-03 07:33:42，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/1b950eab8fa0bbff3aa12b7f3ed07f98.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：html5 canvas 使用示例.doc
本文 PDF 下载地址：html5 canvas 使用示例.pdf
| 留言与评论（共有 0 条评论） |
