生活已是百般艰难,为何不努力一点。下面就给大家分享html5 canvas 简单画板实现代码，希望可以让热爱学习的朋友们体会到设计的小小的乐趣。
效果图：
注：下面的代码运行效果，请在支持html5浏览下执行，才能看到效果。
!doctype html html head titlecanvas简单画板/title style type="text/css" #can{ ; ; solid #ccc; ; ;} /style /head body h2canvas简单画板/h2 canvas width="600" height="500"/canvas script type="text/javascript" function getBodyOffsetTop(el){ var top = 0; do{ top = top + ; }while(el = ); return top; } function getBodyOffsetLeft(el){ var left = 0; do{ left = left + ; }while(el = ); return left; } function Drawing(canvas,options){ typeof canvas == string && (canvas = ()); if(!canvas || !){ throw new Error(100,do not support canvas!); } = { colors:[#000000,#ff0000,#00ff00,#0000ff,#00ffff,#7fef02,#4488bb] }; (); (); } = { (){ typeof options == object || (options = {}); for(var i in options){ switch(i){ case colors: [i] = options[i]; break; } } }, (){ = canvas; = (2d); .lineWidth = 1; .lineJons = ound; .lineCep = ound; = false; = []; = {color:#000000,path:[]}; = 0; = 0; = #000000; ={}; (); (); }, (){ var self = this; .addEventListener(mousemove,function(event){ var x = event.pageX-getBodyOffsetLeft(this), y = event.pageY-getBodyOffsetTop(this); self.onMouseMove({x:x,y:y}); },false); .addEventListener(mousedown,function(event){ var x = event.pageX-getBodyOffsetLeft(this), y = event.pageY-getBodyOffsetTop(this); self.onMouseDown(event,{x:x,y:y}); },false); .addEventListener(mouseup,function(event){ var x = event.pageX-getBodyOffsetLeft(this), y = event.pageY-getBodyOffsetTop(this); self.onMouseUp(event,{x:x,y:y}); },false); .addEventListener(click,function(event){ var x = event.pageX-getBodyOffsetLeft(this), y = event.pageY-getBodyOffsetTop(this); self.onClick({x:x,y:y}); },false); }, onMouseMove:function(pos){ if(){ var p = ; 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; } } .lineTo(pos.x,pos.y); .stroke(); = pos.x; = pos.y; .path.push(pos); } }, onMouseDown:function(event,pos){ if(event.button == 0){ var p = ; 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; } } = true; = pos.x; = pos.y; .beginPath(); .moveTo(,); .color = ; .path.push(pos); } }, onMouseUp:function(event,pos){ if(event.button == 0){ var p = ; 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; } } = false; .push(); = {color:,path:[]}; } }, ResetDrawAll:function(){ .clearRect(0,0,500,500); this.ResetDrawCentre(); (); }, ResetDrawCentre:function(){ var p = ,p2, curColor = .strokeStyle; for(var i=0; i p.length;i++){ .strokeStyle = p[i].color; .beginPath(); for(var t=0; tp[i].path.length;t++){ p2 = p[i].path[t]; if(t==0) .moveTo(p2.x,p2.y); .lineTo(p2.x,p2.y); .stroke(); } .beginPath(); } .strokeStyle = curColor; }, ResetDrawToolbar:function(){ var curcolor = .fillStyle; for(var i=0; i.colors.length;i++){ .fillStyle = .colors[i]; if( == .fillStyle){ .fillRect(i*35+5,2,30,20); [i] ={x:i*35+5,y:2,w:30,h:20}; }else{ .fillRect(i*35+5,5,30,20); [i] = {x:i*35+5,y:5,w:30,h:20}; } .stroke(); } .fillStyle = curcolor; }, onClick:function(pos){ var p = ; 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){ = .colors[i]; .strokeStyle = ; this.ResetDrawAll(); } } } }; new Drawing(can); /script/body /html
提示：您可以先修改部分代码再运行
