JavaScript（四）

来源：互联网发布：淘宝网天猫阿兴家艾条编辑：程序博客网时间：2024/06/13 23:09

用html5里的canvas做一个在线画图，这里的是我看视频自己学的，代码注释有的是根据自己的理解添加的，可以作为参考。

整体的界面截图：

先说下这个在线画板的整体思路吧，

（1）先设计好整体的布局，也就是样式什么的，里面有鼠标经过改变边框这个自己加就行，用的hover这个属性，

（2）给每个按钮加一个onclick事件，也要给个id方便后面用到。

（3）这一步就重要了再js里写操作函数，先获取相应的标签，然后对其操作，我们会用到函数，也会用到数组（用数组的目的是为了只选择一个事件起作用，后面看代码可以看到）。

注释很详细，不多说上代码:

1.html代码：

<!DOCTYPE html><html><head><meta charset="utf-8" /><link rel="stylesheet" type="text/css" href="css/index.css"/><title></title></head><body><header id="header">在线画板</header><section id="content"><!--工具区--><ul id="tool"><li><h3>图形</h3><hr /><ul id="image"><form id="myform" name="data" action="http://localhost/down.php" method="post"><li id="saveimg"><button onclick="saveimg()">保存图片</button></li><input type="hidden"  name="data" id="data"/></form><li id="clearimg"><button onclick="clearimag()">清空画板</button></li></ul></li><li><h3>工具</h3><hr /><ul id="means"><li id="means_brush" onclick="drawBrush(0)"><img src="img/Brush.png" alt="" /></li><li id="means_eraser" onclick="drawEraser(1)"><img src="img/Eraser.png"/></li><li id="means_paint" onclick="drawPaint(2)"><img src="img/Paint.png" alt="" /></li><li id="means_straw" onclick="drawStraw(3)"><img src="img/Straw.png" alt="" /></li><li id="means_text" onclick="drawText(4)"><img src="img/text.png" alt="" /></li><li id="means_magnifier" onclick="drawMagnifier(5)"><img src="img/magnifier.png" alt="" /></li></ul></li><li><h3>形状</h3><hr /><ul id="shape"><li id="shape_line" onclick="drawLine(6)"><img src="img/line.png" alt="" /></li><li id="shape_arc" onclick="drawArc(7)"><img src="img/arc.png"/></li><li id="shape_rect" onclick="drawRect(8)"><img src="img/rect.png" alt="" /></li><li id="shape_poly" onclick="drawPoly(9)"><img src="img/poly.png" alt="" /></li><li id="shape_arcfill" onclick="drawArcfill(10)"><img src="img/arcfill.png" alt="" /></li><li id="shape_rectfill" onclick="drawRectfill(11)"><img src="img/rectfill.png" alt="" /></li></ul></li><li><h3>线宽</h3><hr /><ul id="size"><li id="width_1" onclick="setLineWidth(0)"><img src="img/line1px.png" alt="" /></li><li id="width_3" onclick="setLineWidth(1)"><img src="img/line3px.png"/></li><li id="width_5" onclick="setLineWidth(2)"><img src="img/line5px.png" alt="" /></li><li id="width_8" onclick="setLineWidth(3)"><img src="img/line8px.png" alt="" /></li></ul></li><li><h3>颜色</h3><hr /><ul id="color"><li id="red" onclick="setColor(this,0)"></li><li id="green" onclick="setColor(this,1)"></li><li id="blue" onclick="setColor(this,2)"></li><li id="yellow" onclick="setColor(this,3)"></li><li id="white" onclick="setColor(this,4)"></li><li id="black" onclick="setColor(this,5)"></li><li id="pink" onclick="setColor(this,6)"></li><li id="purple" onclick="setColor(this,7)"></li><li id="cyan" onclick="setColor(this,8)"></li><li id="orange" onclick="setColor(this,9)"></li></ul></li></ul><div id="sizeCanvas"><!--绘图区--><canvas id="canvas" width="880px" height="410px">您的浏览器不支持canvas标签请升级浏览器</canvas></div><!--因为解析是从上到下的所以在canvas后面引入js文件这样不会出错。--><script type="text/javascript" src="js/index.js"></script></section><footer id="footer"><small>一叶书林</small></footer></body></html>

2.css样式：

/*页面公共属性设置*/*{margin: 0;padding: 0;list-style: none;/*border: 0;*/}body{background: #ABCDEF;}/*页面顶部属性设置*/#header{width: 900px;height: 80px;font-size: 20px;margin: 0 auto;text-align: center;line-height: 100px;}/*页面中间部分属性设置*/#content{width: 900px;height: 550px;background: gray;margin: 0 auto;overflow: hidden;}#sizeCanvas{width: 890px;height: 420px;overflow: hidden;}#canvas{background: white;margin: 10px;}#canvas:hover{cursor: crosshair;}#tool{height: 100px;margin-left: 10px;text-align: center;}#tool li{float: left;width: 174px;height: 110px;background: #ccc;margin-top: 10px;border-right: 1px solid red;}#image{text-align: left;padding-left: 15px;}#image li{height: 18px;list-style: square inside;width: 100px;border: 0;}#image li button{background: gray;border: 1px solid #000;}#image li button:hover{border: 1px solid white;}#means,#shape{margin-left: 15px;margin-top: 1px;}#means  img,#shape img{height: 20px;width: 20px;}#means li,#shape li{height: 20px;width: 45px;border: 1px solid black;}#means li:hover,#shape li:hover{border: 1px solid white;}#size li{height: 5px;width: 90px;border: 1px solid #CCCCCC;margin-left:40px ;}#size li img{height: 5px;width: 90px;}#size li img:hover{border: 1px solid white;}#color{margin-left: 3px;}#color li{width: 29px;height: 23px;border: 1px solid #000;margin-left: 2px;}#color li:hover{border:1px solid white;}#color #red{background: red;}#color #green{background: green;}#color #blue{background: blue;}#color #yellow{background: yellow;}#color #white{background: white;}#color #black{background: black;}#color #pink{background: pink;}#color #purple{background: purple;}#color #cyan{background: cyan;}#color #orange{background: orange;}/*页面底部属性设置*/#footer{width: 900px;height: 60px;margin: 0 auto;text-align: center;}

3.js代码：

var canvas=document.getElementById("canvas");var cxt=canvas.getContext("2d");//获取工具中的画笔//获取画笔标签var Brush = document.getElementById("means_brush");//获取橡皮标签var Eraser = document.getElementById("means_eraser");//获取油漆桶标签var Paint = document.getElementById("means_paint");//获取吸管标签var Straw = document.getElementById("means_straw");//获取文本标签var Text = document.getElementById("means_text");//获取放大镜标签var Magnifier = document.getElementById("means_magnifier");//获取形状按钮标签//获取划线标签var Line = document.getElementById("shape_line");//获取画圆圈标签var Arc = document.getElementById("shape_arc");//获取画方框标签var Rect = document.getElementById("shape_rect");//获取画多标签的标签var Poly = document.getElementById("shape_poly");//获取画圆形标签填充var Arcfill = document.getElementById("shape_arcfill");//获取画矩形标签var Rectfill = document.getElementById("shape_rectfill");//把十二个标签放到一个数组里var actions=[Brush,Eraser,Paint,Straw,Text,Magnifier,Line,Arc,Rect,Poly,Arcfill,Rectfill]//获取线宽按钮var line_1 = document.getElementById("width_1");var line_3 = document.getElementById("width_3");var line_5 = document.getElementById("width_5");var line_8 = document.getElementById("width_8");//把四种线宽放到一个数组中var widths = [line_1,line_3,line_5,line_8];//获取颜色按钮var ColorRed = document.getElementById("red");var ColorGreen = document.getElementById("green");var ColorBlue = document.getElementById("blue");var ColorYellow = document.getElementById("yellow");var ColorWhite = document.getElementById("white");var ColorBlack = document.getElementById("black");var ColorPink = document.getElementById("pink");var ColorPurple = document.getElementById("purple");var ColorCyan = document.getElementById("cyan");var ColorOrange = document.getElementById("orange");////把颜色放到一个数组里var colors=[ColorRed,ColorGreen,ColorBlue,ColorYellow,ColorWhite,ColorBlack,ColorPink,ColorPurple,ColorCyan,ColorOrange];//设置图像功能函数function saveimg(){var imgdate = canvas.toDataURL();var b64 = imgdate.substring(22);//alert(b64);var data=document.getElementById("date");data.value(b64);//将表单提交到后台//http：localhost/down.phpvar form=document.getElementById("myform");form.submit();}function clearimag(){//画布清除方法//四个参数前两个是清空的开始坐标,后两个一个是画布的宽度一个是画布的高度cxt.clearRect(0,0,880,410);}//设置初始值//默认值画笔工具drawBrush(0);//默认设置线宽setLineWidth(0);//默认设置颜色setColor(ColorRed,0);//工具形状状态设置函数function  setStatus(Arr,num,type){for(var i=0;i<Arr.length;i++){//设置选中的标签属性if(i == num){if(type==1){//设置改变css的样式是背景色还是边框1是背景色0是边框Arr[i].style.background="yellow";}else{Arr[i].style.border="1px solid #fff";}}else{//设置未选中的其他标签的颜色和边的颜色if(type==1){Arr[i].style.background="#ccc";}else{Arr[i].style.border="1px solid #000";}}}}//列出上面的所有的函数//画笔函数function drawBrush(num){setStatus(actions,num,1);var  flag=0;//鼠标进来是不画的得等到点击才画//鼠标按下去的时候开始点canvas.onmousedown = function(evt){evt=window.event||evt;//适应浏览器var startX=evt.pageX-this.offsetLeft;var startY=evt.pageY-this.offsetTop;cxt.beginPath();cxt.moveTo(startX,startY);flag=1;}//鼠标移动不停的画图,就是鼠标的位置canvas.onmousemove=function(){evt=window.event||evt;var endX=evt.pageX-this.offsetLeft;var endY=evt.pageY-this.offsetTop;//判断鼠标是不是点击过if(flag){cxt.lineTo(endX,endY);cxt.stroke();}}//鼠标抬起的时候结束画图canvas.onmouseup=function(){flag=0;}//鼠标移出时flag=0;canvas.onmouseout=function(){flag=0;}}//橡皮擦函数var eraserFlag=0;//橡皮擦的状态标志位function drawEraser(num){setStatus(actions,num,1)canvas.onmousedown=function(evt){evt=window.event||evt;var eraserX=evt.pageX-this.offsetLeft;var eraserY=evt.pageY-this.offsetTop;//canvas 擦除方法是cxt.clearRect();cxt.clearRect(eraserX-cxt.lineWidth,eraserY-cxt.lineWidth,cxt.lineWidth*2,cxt.lineWidth*2)eraserFlag=1;}canvas.onmousemove=function(evt){evt=window.event||evt;var eraserX=evt.pageX-this.offsetLeft;var eraserY=evt.pageY-this.offsetTop;//擦除方法,随着鼠标擦除//加一个判断,判断鼠标左键是否按下(拖动鼠标才能删除)if(eraserFlag){cxt.clearRect(eraserX-cxt.lineWidth,eraserY-cxt.lineWidth,cxt.lineWidth*2,cxt.lineWidth*2)}}//抬起鼠标标志位变成0;canvas.onmouseup=function(evt){evt=window.event||evt;eraserFlag=0;}//鼠标移出画笔标志位设置为0canvas.onmouseout=function(evt){evt=window.event||evt;eraserFlag=0;}}//油漆桶函数（整个画布变成一个颜色）function drawPaint(num){setStatus(actions,num,1)canvas.onmousedown=function(){//把画布图成指定颜色evt=window.event||evt;cxt.fillRect(rectX,rectY,rectW,rectH);}canvas.onmouseup=null;canvas.onmousemove=null;canvas.onmouseout=null;}//吸管函数function drawStraw(num){setStatus(actions,num,1)canvas.onmousedown=function(evt){evt=window.event||evt;var strawX=evt.pageX-this.offsetLeft;var strawY=evt.pageY-this.offsetTop;//获取该点的颜色信息//获取图形信息的方法getImageData(开始点x和结束点y，宽度和高度四个信息)var obj=cxt.getImageData(strawX,strawY,1,1);//像素信息都存在了obj.data里,里面放的是[红,绿,蓝,透明度,红,绿,蓝,透明度,红,绿,蓝,透明度]var color="rgb("+obj.data[0]+","+obj.data[1]+","+obj.data[2]+")";//alert(color);//将吸管吸出的颜色设置到应用中cxt.strokeStyle=color;cxt.fillStyle=color;//吸管吸过颜色后自动将画笔颜色设置成吸管吸的颜色drawBrush(0);}//取消移动事件,鼠标抬起事件,鼠标移出事件,canvas .onmousemove=null;canvas.onmouseup=null;canvas.onmouseout=null;}//文本函数function drawText(num){setStatus(actions,num,1)canvas.onmousedown=function(evt){evt=window.event||evt;//获取鼠标点击时的位置//获取用户输入的信息//将用户输入的信息写到画布中相应的画板上var textX=evt.pageX-this.offsetLeft;var textY=evt.pageY-this.offsetTop;//alert(textX,textY);//获取用户输入的信息//window.prompt();var userVal= window.prompt("请输入你要输入的文字：","");//alert(userVal);if(userVal!=null){cxt.fillText(userVal,textX,textY);}}canvas.onmousemove=null;canvas.onmouseup=null;canvas.onmouseout=null;}//放大镜函数function drawMagnifier(num){setStatus(actions,num,1)//用户输入的数据大小var scale=window.prompt("请输入放大的百分比","100");//把数据转成对canvas画布的大小var scaleW=880*scale/100;var scaleH=410*scale/100;//将数据设置到对应html标签上canvas.style.width=parseInt(scaleW)+"px";canvas.style.height=parseInt(scaleH)+"px";}//划线函数function drawLine(num){setStatus(actions,num,1)canvas.onmousedown=function(evt){evt=window.event||evt;//区分浏览器兼容浏览器//获取起始点坐标(相对于画布的)//获取页面顶端距离//evt.pageX,evt.pageY;//画布距离顶端距离//this.offsetTop, this.offsetHeight//当前鼠标距离互补的距离var startX = evt.pageX-this.offsetLeft;var startY = evt.pageY-this.offsetTop;//直线的开始点cxt.beginPath();//尽量写上，不写可能会受到干扰cxt.moveTo(startX,startY);}canvas.onmousemove=null;//注销掉不做的事件canvas.onmouseout=null;//鼠标移走没有事件//鼠标键抬起来的时候canvas.onmouseup=function(evt){var endX=evt.pageX-this.offsetLeft;var endY=evt.pageY-this.offsetTop;//开始点和结束点连接起来了cxt.lineTo(endX,endY);cxt.closePath();cxt.stroke();}}//画圈函数//变量设置全局标量var arcX=0;var arcY=0;function drawArc(num){setStatus(actions,num,1)canvas.onmousedown=function(evt){//获取圆心的位置evt=window.event||evt;arcX=evt.pageX-this.offsetLeft;arcY=evt.pageY-this.offsetTop;}canvas.onmouseup=function(evt){//获取半径(实际是一个坐标)evt=window.event||evt;var endX=evt.pageX-this.offsetLeft;var endY=evt.pageY-this.offsetTop;//计算两点的距离也就是圆的rvar a=endX-arcX;var b=endY-arcY;//半径c等于var c=Math.sqrt(a*a+b*b);cxt.beginPath();cxt.arc(arcX,arcY,c,0,360,false);cxt.closePath();cxt.stroke();}canvas.onmousemove=null;canvas.onmouseout=null;}//设置矩形全局变量var rectX=0;var rectY=0;var rectW=0;var rectH=0;//画矩形函数function drawRect(num){setStatus(actions,num,1)canvas.onmousedown=function(evt){evt=window.event||evt;//获取矩形对角线的第一个点坐标rectX=evt.pageX-this.offsetLeft;rectY=evt.pageY-this.offsetTop;}canvas.onmouseup=function(evt){evt=window.event||evt;//先获取鼠标当前坐标var endX=evt.pageX-this.offsetLeft;var endY=evt.pageY-this.offsetTop;//计算矩形的宽和高 rectW=endX-rectX; rectH=endY-rectY;//开始画矩形cxt.strokeRect(rectX,rectY,rectW,rectH);}canvas.onmousemove=null;canvas.onmouseout=null;}//画多边行（三角形）函数//全局变量var polyX=0;var polyY=0;function drawPoly(num){setStatus(actions,num,1)canvas.onmousedown=function(evt){evt=window.event||evt;polyX=evt.pageX-this.offsetLeft;polyY=evt.pageY-this.offsetTop;}canvas.onmouseup=function(evt){evt=window.event||evt;var endX=evt.pageX-this.offsetLeft;var endY=evt.pageY-this.offsetTop;//将画笔移动到右下角的顶点cxt.moveTo(endX,endY);//计算左下角的顶点坐标var lbX=2*polyX-endX;var lbY=endX;cxt.lineTo(lbX,lbY);//设置第三个顶点的坐标var tmpC=2*(endX-polyX);var tmpA=endX-polyX;var tmpB=Math.sqrt(tmpC*tmpC-tmpA*tmpA);//计算顶点坐标//endY-tmpB是顶点的y坐标,polyX是顶点的X坐标//画图三角形cxt.lineTo(polyX,endY-tmpB);cxt.closePath();cxt.stroke();}canvas.onmousemove=null;canvas.onmouseout=null;}//画实心圆函数function drawArcfill(num){setStatus(actions,num,1)canvas.onmousedown=function(evt){//获取圆心的位置evt=window.event||evt;arcX=evt.pageX-this.offsetLeft;arcY=evt.pageY-this.offsetTop;}canvas.onmouseup=function(evt){//获取半径(实际是一个坐标)evt=window.event||evt;var endX=evt.pageX-this.offsetLeft;var endY=evt.pageY-this.offsetTop;//计算两点的距离也就是圆的rvar a=endX-arcX;var b=endY-arcY;//半径c等于var c=Math.sqrt(a*a+b*b);cxt.beginPath();cxt.arc(arcX,arcY,c,0,360,false);cxt.closePath();cxt.fill();}canvas.onmousemove=null;canvas.onmouseout=null;}////设置矩形全局变量,全局变量设置一次就行行了//var rectX=0;//var rectY=0;//画填充矩形函数function drawRectfill(num){setStatus(actions,num,1)canvas.onmousedown=function(evt){evt=window.event||evt;//获取矩形对角线的第一个点坐标rectX=evt.pageX-this.offsetLeft;rectY=evt.pageY-this.offsetTop;}canvas.onmouseup=function(evt){evt=window.event||evt;//先获取鼠标当前坐标var endX=evt.pageX-this.offsetLeft;var endY=evt.pageY-this.offsetTop;//计算矩形的宽和高var rectW=endX-rectX;var rectH=endY-rectY;//开始画矩形cxt.fillRect(rectX,rectY,rectW,rectH);}canvas.onmousemove=null;canvas.onmouseout=null;}//线宽函数function setLineWidth(num){setStatus(widths,num,1)switch(num){case 0:cxt.lineWidth=1;break;case 1:cxt.lineWidth=3;break;case 2:cxt.lineWidth=5;break;case 3:cxt.lineWidth=8;break;default:cxt.lineWidth=1;}}//获取颜色function setColor(obj,num){setStatus(colors,num,0)//设置颜色和填充颜色cxt.strokeStyle=obj.id;cxt.fillStyle=obj.id;}

4.注意小程序里的图片在项目里，这里是整个程序的下载链接：http://download.csdn.net/detail/yelang0111/9915930

更新代码：http://download.csdn.net/detail/yelang0111/9916764

程序有不完整的地方后面会持续更新，也欢迎大家一起改。

阅读全文

1 0