html5 canvas 简单画板实现代码

程序员文章站 2023-11-27 10:43:16

canvas简单画板，花了几个小时搞定的简单玩意，目前只是初步demo，有时间在完善一下... 12-01-05...

效果图：

注：下面的代码运行效果，请在支持html5浏览下执行，才能看到效果。

<!doctype html> 
<html> 
<head> 
<title>canvas简单画板</title> 
<style type="text/css"> 
#can{ width:600px; height:500px; border:1px solid #ccc; margin-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 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<p[i].path.length;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.option.colors.length;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'); 
</script></body> 
</html>

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

上一篇：整理的15个非常有用的 HTML5 开发教程和速查手册

下一篇：只要五步就可以用HTML5/CSS3快速制作便签贴特效(图)

html5 canvas 简单画板实现代码

Python实现爬取知乎神回复简单爬虫代码分享

VUE+Element UI实现简单的表格行内编辑效果的示例的代码

Node.js 实现简单的接口服务器的实例代码

jQuery实现简单的滑动导航代码(移动端)

PHP如何通过传引用的思想实现无限分类(代码简单)

Android毛玻璃背景效果简单实现代码

html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)

html5 canvas 简单画板实现代码

html5简单特效代码（html5零基础入门教程）

js上下视差滚动简单实现代码