html5 canvas 画板 demo,html5 canvas 简单画板实现代码

canvas简单画板

#can{ width:600px; height:500px; border:1px solid #ccc; margin-top:0px; margin-left:20px;}

canvas简单画板

function getbodyoffsettop(el){

var top = 0;

do{

top = top + el.offsettop;

}while(el = el.offsetparent);

return top;

}

function getbodyoffsetleft(el){

var left = 0;

do{

left = left + el.offsetleft;

}while(el = el.offsetparent);

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.setoption(options);

this.init(canvas);

}

drawing.prototype = {

setoption:function(options){

typeof options == 'object' || (options = {});

for(var i in options){

switch(i){

case '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 = false;

this.historystroker = [];

this.curstroker = {color:'#000000',path:[]};

this.lastx = 0;

this.lasty = 0;

this.curcolor = '#000000';

this.toolbarspos ={};

this.bindevent();

this.resetdrawtoolbar();

},

bindevent:function(){

var self = this;

this.canvas.addeventlistener('mousemove',function(event){

var x = event.pagex-getbodyoffsetleft(this),

y = event.pagey-getbodyoffsettop(this);

self.onmousemove({x:x,y:y});

},false);

this.canvas.addeventlistener('mousedown',function(event){

var x = event.pagex-getbodyoffsetleft(this),

y = event.pagey-getbodyoffsettop(this);

self.onmousedown(event,{x:x,y:y});

},false);

this.canvas.addeventlistener('mouseup',function(event){

var x = event.pagex-getbodyoffsetleft(this),

y = event.pagey-getbodyoffsettop(this);

self.onmouseup(event,{x:x,y:y});

},false);

this.canvas.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(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);

}

},

onmousedown: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 = 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);

}

},

onmouseup: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 = false;

this.historystroker.push(this.curstroker);

this.curstroker = {color:this.curcolor,path:[]};

}

},

resetdrawall:function(){

this.context.clearrect(0,0,500,500);

this.resetdrawcentre();

this.resetdrawtoolbar();

},

resetdrawcentre: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

p2 = p[i].path[t];

if(t==0) this.context.moveto(p2.x,p2.y);

this.context.lineto(p2.x,p2.y);

this.context.stroke();

}

this.context.beginpath();

}

this.context.strokestyle = curcolor;

},

resetdrawtoolbar:function(){

var curcolor = this.context.fillstyle;

for(var i=0; i

this.context.fillstyle = this.option.colors[i];

if(this.curcolor == 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};

}else{

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.resetdrawall();

}

}

}

};

new drawing('can');

提示：您可以先修改部分代码再运行