注：下面的代码运行效果，请在支持html5浏览下执行，才能看到效果。
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].y
&& pos.y = p[i].x
&& pos.x = p[i].y
&& pos.y = p[i].x
&& pos.x = p[i].y
&& pos.y = p[i].x
&& pos.x = p[i].y
&& pos.y
ffcod = delpost.runcode55 .value; ffcod = ffcod.replace(/
/g,''); delpost.runcode55 .value = ffcod; 提示：您可以先修改部分代码再运行
查看更多关于html5canvas简单画板实现代码_html5教程技巧的详细内容...