效果图：
注：下面的代码运行效果，请在支持html5浏览下执行，才能看到效果。
<!doctype html> <html> <head> <title>canvas简单画板</title> <style type=”text/css”> #can{ width:600px; height:500px; border:1px solid #ccc; mar水泥机械gin-top:0px; margin-left:20px;} </style> </head> <body> <h2 style=”padding-left:20px”>canvas简单画板</h2> <canvas id=”can” width=”600″ height=”500″></canvas> <script type=”text/javascript”> function getbodyoffttop(el){ var top = 0; do{ top = top + el.offttop; }while(el = el.offtparent); return top; } function getbodyofftleft(el){ var left = 0; do{ left = left + el.offtleft; }while(el = el.offtparent); return left; } function drawing(canvas,options){ typeof canvas == ‘string’ && (canvas = document.getelementbyid(canvas)); if(!canvas || !canvas.getcontext){ throw new error(100,’do not support canvas!’); } this.option = { colors:[‘#000000′,’#ff0000′,’#00ff00′,’#0000ff’,’#00ffff’,’#7fef02′,’#4488bb’] }; this.toption(options); this.init(canvas); } drawing.prototype = { toption:function(options){ typeof options == ‘object’ || (options = {}); for(var i in options){ switch(i){ ca ‘colors’: this.option[i] = options[i]; break; } } }, init:function(canvas){ this.canvas = canvas; this.context = canvas.getcontext(‘2d’); this.context.linewidth = 1; this.context.linejons = ’round’; this.context.linecep = ’round’; this.isbuttondown = fal; this.historystroker = []; this.curstroker = {color:’#000000′,path:[]}; this.lastx = 0; this.lasty = 0; this.curcolor = ‘#000000’; this.toolbarspos ={}; this.bindevent(); this.retdrawtoolbar(); }, bindevent:function(){ var lf = this; this.canvas.addeventlistener(‘moumove’,function(event){ var x = event.pagex-getbodyofftleft(this), y = event.pagey-getbodyoffttop(this); lf.onmoumove({x:x,y:y}); },fal); this.canvas.addeventlistener(‘moudown’,function(event){ var x = event.pagex-getbodyofftleft(this), y = event.pagey-getbodyoffttop(this); lf.onmoudown(event,{x:x,y:y}); },fal); this.canvas.addeventlistener(‘mouup’,function(event){ var x = event.pagex-getbodyofftleft(this), y = event.pagey-getbodyoffttop(this); lf.onmouup(event,{x:x,y:y}); },fal); this.canvas.addeventlistener(‘click’,function(event){ var x = event.pagex-getbodyofftleft(this), y = event.pagey-getbodyoffttop(this); lf.onclick({x:x,y:y}); },fal); }, onmoumove:function(pos){ if(this.isbuttondown){ var p = this.toolbarspos; for(var i in p){ if(pos.x >= p[i].x && pos.x <= p[i].x+p[i].w && pos.y >= p[i].y && pos.y <= p[i].y+p[i].h){ return; } } this.context.lineto(pos.x,pos.y); this.context.stroke(); this.lastx = pos.x; this.lasty = pos.y; this.curstroker.path.push(pos); } }, onmoudown:function(event,pos){ if(event.button == 0){ var p = t北邮远程网络教育学院his.toolbarspos; for(var i in p){ if(pos.x >= p[i].x && pos.x <= p[i].x+p[i].w && pos.y >= p[i].y && pos.y <= p[i].y+p[i].h){ return; } } this.isbuttondown = true; this.lastx = pos.x; this.lasty = pos.y; this.context.beginpath(); this.context.moveto(this.lastx,this.lasty); this.curstroker.color = this.curcolor; this.curstroker.path.push(pos); } }, onmouup:function(event,pos){ if(event.button == 0){ var p = this.toolbarspos; for(var i in p){ if(pos.x >= p[i].x && pos.x <= p[i].x+p[i].w && pos.y >= p[i].y && pos.y <= p[i].y+p[i].h){ return; } } this.isbuttondown = fal; this.historystroker.push(this.curstroker); this.curstroker = {color:this.curcolor,path:[]}; } }, retdrawall:function(){ this.context.clearrect(0,0,500,500); this.retdrawcentre(); th晷怎么读is.retdrawtoolbar(); }, retdrawcentre:function(){ var p = this.historystroker,p2, curcolor = this.context.strokestyle; for(var i=0; i< p.length;i++){ this.context.strokestyle = p[i].color; this.context.beginpath(); for(var t=0; t<p[i].path.length;t++){ p2 = p[i].path[t]; if(t==0) this.context.moveto(p2.x,p韩国影星2.y); this.context.lineto(p2.x,p2.y); this.context.stroke(); } this.context.beginpath(); } this.context.strokestyle = curcolor; }, retdrawtoolbar:function(){ var curcolor = this.context.fillstyle; for(var i=0; i<this.option.colors.length;i++){ this.context.fillstyle = this.option.colors[i]; if(this.curc野生猕猴桃olor == this.context.fillstyle){ this.context.fillrect(i*35+5,2,30,20); this.toolbarspos[i] ={x:i*35+5,y:2,w:30,h:20}; }el{ this.context.fillrect(i*35+5,5,30,20); this.toolbarspos[i] = {x:i*35+5,y:5,w:30,h:20}; } this.context.stroke(); } this.context.fillstyle = curcolor; }, onclick:function(pos){ var p = this.toolbarspos; for(var i in p){ if(pos.x >= p[i].x && pos.x <= p[i].x+p[i].w && pos.y >= p[i].y && pos.y <= p[i].y+p[i].h){ this.curcolor = this.option.colors[i]; this.context.strokestyle = this.curcolor; this.retdrawall(); } } } }; new drawing(‘can’); </script></body> </html>
提示：您可以先修改部分代码再运行
本文发布于:2023-04-03 07:25:10，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/37682e00133c1b1cf4bdbd7dac1efa30.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：html5 canvas 简单画板实现代码.doc
本文 PDF 下载地址：html5 canvas 简单画板实现代码.pdf
| 留言与评论（共有 0 条评论） |
