javascript结合html5canvas实现（可调画笔颜⾊粗细橡
⽪）的涂鸦板
js+html5 canvas实现的涂鸦画板特效，可调画笔颜⾊|粗细|橡⽪，可以保存涂鸦效果为图⽚编码，⾮常适合学习html5的canvas，必须⽀持html5的浏览器才能看到效果。
复制代码代码如下:
<!doctype html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript结合html5 canvas实现的涂鸦板 - 分享JavaScript-sharejs</title>
<meta name="Copyright" content="JavaScript分享⽹ www.sharejs/" />
<meta name="description" content="javascript结合html5 canvas实现的涂鸦板,JavaScript分享⽹，js脚本，⽹页特效，⽹页模板，png图标，⽮量图下载" />
<meta content="JavaScript，分享,JavaScript代码,Ajax,jQuery,⽹页模板,PNG图标，⽮量图" name="keywords" />
</head>
<body>
<style>
*{margin:0;padding:0;}
.fa{width:740px;margin:0 auto;}
.top{margin:20px 0;}
.top input{width:25px;height:25px;border:1px solid #fff;border-radius:4px;background:#ddd;}
.top .i1{background:#000000;}
.top .i2{background:#FF0000;}
.top .i3{background:#80FF00;}
.top .i4{background:#00FFFF;}
.top .i5{background:#808080;}
.top .i6{background:#FF8000;}
.top .i7{background:#408080;}
.top .i8{background:#8000FF;}
.top .i9{background:#CCCC00;}
#canvas{background:#eee;cursor:default;}
.font input{font-size:14px;}
.top .grea{background:#aaa;}
html5颜代码</style>
</head>
<body>
<div class="fa">
<div class="top">
<div id="color">
请选择画笔颜⾊：
<input class="i1" type="button" value="" />
<input class="i2" type="button" value="" />
<input class="i3" type="button" value="" />
<input class="i4" type="button" value="" />
<input class="i5" type="button" value="" />
<input class="i6" type="button" value="" />
<input class="i7" type="button" value="" />
<input class="i8" type="button" value="" />
<input class="i9" type="button" value="" />
</div>
<div class="font" id="font">
请选择画笔的宽度：
<input type="button" value="细" />
<input type="button" value="中" class="grea"/>
<input type="button" value="粗" />
</div>
<div>
<span id="error">如果有错误，请使⽤橡⽪擦：</span>
<input id="eraser" type="button" value="橡⽪擦" />
</div>
<input id="clear" type="button" value="清除画布" />
<input id="revocation" type="button" value="撤销" />
<input id="imgurl" type="button" value="导出图⽚路径" />
</div>
<canvas id="canvas" width="740" height="420">您的浏览器不⽀持 canvas 标签</canvas>
<div id="div1"></div>
</div>
<div id="html">
</div>
<script>
(function(){
var paint={
init:function()
{
this.load();
},
load:function()
{
this.x=[];//记录⿏标移动是的X坐标
this.y=[];//记录⿏标移动是的Y坐标
this.clickDrag=[];
this.lock=false;//⿏标移动前，判断⿏标是否按下
this.isEraser=false;
//this.Timer=null;//橡⽪擦启动计时器
//this.radius=5;
this.storageColor="#000000";
this.fontWeight=[2,5,8];
this.$=function(id){return typeof id=="string"?ElementById(id):id;};
this.canvas=this.$("canvas");
if (Context) {
} else {
alert("您的浏览器不⽀持 canvas 标签");
return;
}
<=Context('2d');
this.iptClear=this.$("clear");
this.imgurl=this.$("imgurl");//图⽚路径按钮
this.w=this.canvas.width;//取画布的宽
this.h=this.canvas.height;//取画布的⾼
this.StartEvent = uch ? "touchstart" : "mousedown";//⽀持触摸式使⽤相应的事件替代
this.MoveEvent = uch ? "touchmove" : "mousemove";
this.EndEvent = uch ? "touchend" : "mouseup";
this.bind();
},
bind:function()
{
var t=this;
/*清除画布*/
lick=function()
{
t.clear();
};
/*⿏标按下事件，记录⿏标位置，并绘制，解锁lock，打开mousemove事件*/
this.canvas['on'+t.StartEvent]=function(e)
var uch ? e.touches[0] : e;
var _x=touch.clientX - touch.target.offsetLeft;//⿏标在画布上的x坐标，以画布左上⾓为起点var _y=touch.clientY - touch.target.offsetTop;//⿏标在画布上的y坐标，以画布左上⾓为起点if(t.isEraser)
{
/*
*/
}else
{
t.drawPoint();//绘制路线
}
t.lock=true;
};
/*⿏标移动事件*/
this.canvas['on'+t.MoveEvent]=function(e)
{
var uch ? e.touches[0] : e;
if(t.lock)//t.lock为true则执⾏
{
var _x=touch.clientX - touch.target.offsetLeft;//⿏标在画布上的x坐标，以画布左上⾓为起点var _y=touch.clientY - touch.target.offsetTop;//⿏标在画布上的y坐标，以画布左上⾓为起点if(t.isEraser)
{
//if(t.Timer)clearInterval(t.Timer);
//t.Timer=setInterval(function(){
//},10);
}
else
{
t.drawPoint();//绘制路线
}
}
};
this.canvas['on'+t.EndEvent]=function(e)
{
/*重置数据*/
t.lock=false;
t.x=[];
t.y=[];
t.clickDrag=[];
clearInterval(t.Timer);
t.Timer=null;
};
{
};
this.changeColor();
lick=function()
{
/
*橡⽪擦*/
this.$("eraser").onclick=function(e)
{
t.isEraser=true;
t.$("error").lor="red";
t.$("error").innerHTML="您已使⽤橡⽪擦！";
};
},
movePoint:function(x,y,dragging)
{
/*将⿏标坐标添加到各⾃对应的数组⾥*/
this.clickDrag.push(y);
},
drawPoint:function(x,y,radius)
{
for(var i=0; i < length; i++)//循环数组
{
if(this.clickDrag[i] && i){//当是拖动⽽且i!=0时，从上⼀个点开始画线。
}else{
}
}
},
clear:function()
{
},
redraw:function()
{
/*撤销*/
},
preventDefault:function(e){
/*阻⽌默认*/
var uch ? e.touches[0] : e;
uch)touch.preventDefault();
else urnValue = false;
},
changeColor:function()
{
/*为按钮添加事件*/
var
t=this,iptNum=this.$("color").getElementsByTagName("input"),fontIptNum=this.$("font").getElementsByTagName("input"); for(var i=0,l=iptNum.length;i<l;i++)
{
iptNum[i].index=i;
iptNum[i].onclick=function()
{
t.lor[this.index];
t.$("error").lor="#000";
t.$("error").innerHTML="如果有错误，请使⽤橡⽪擦：";
t.isEraser=false;
}
}
for(var i=0,l=fontIptNum.length;i<l;i++)
{
fontIptNum[i].index=i;
fontIptNum[i].onclick=function()
{
t.changeBackground(this.index);
t.$("error").lor="#000";
t.$("error").innerHTML="如果有错误，请使⽤橡⽪擦：";
t.isEraser=false;
}
}
},
changeBackground:function(num)
{
/*添加画笔粗细的提⽰背景颜⾊切换，灰⾊为当前*/
var fontIptNum=this.$("font").getElementsByTagName("input");
for(var j=0,m=fontIptNum.length;j<m;j++)
{
fontIptNum[j].className="";
if(j==num) fontIptNum[j].className="grea";
}
},
getUrl:function()
{
this.$("html").innerHTML=DataURL();
},
resetEraser:function(_x,_y,touch)
{
/*使⽤橡⽪擦-提醒*/
var t=this;
//lineWidth = 30;
/*source-over 默认，相交部分由后绘制图形的填充(颜⾊，渐变，纹理)覆盖，全部浏览器通过*/ t.cxt.globalCompositeOperation = "destination-out";
}
};
paint.init();
})();
</script>
<div ></div>
</body>
</html>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论