html5 canvas 简单画板实现代码_html5教程技巧-H5教程-PHP中文网

效果图：

注：下面的代码运行效果，请在支持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> 
<script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script>
</head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="http://www.2018haoyunlai.com/from/188bet.php" ><img width="120px" height="600px" src="http://www.2018haoyunlai.com/images/188_120.gif"></a></div></div> <div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="http://www.2018haoyunlai.com/from/manbetx.php"><img width="120px" height="600px" src="http://www.2018haoyunlai.com/images/wb600.gif"></a> </div></div> 
<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>

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

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

专题推荐：html5 canvas

上一篇：关于HTML5的22个初级技巧(图文教程)_html5教程技巧下一篇：自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

html5 canvas 简单画板实现代码_html5教程技巧

相关文章推荐

相关课程推荐

PHP入门视频教程之一周学会PHP

弹指间学会HTML视频教程

弹指间学会CSS视频教程

javascript初级视频教程

CSS3 最新视频教程

PHP中文网