1、时钟：
<!doctype html> <html> <head></head> <body> <canvas id="clock" width="500" height="500"> 您的浏览器不支持canvas标签，无法看到时钟 </canvas> <script> var clock=document.getElementById('clock'); var cxt=clock.getContext('2d'); /* 1、获取画布 2、画图时首先需要设置画笔颜色，画笔画出的宽度。 3、开始路径。 4、画笔操作，比如画直线，矩形等。 5、关闭路径。 6、图像已经出来了，那么可以进行填充等。例如给圆填充颜色。 7、显示前面画出的结果。 */ function drawClock(){ //清除画布 cxt.clearRect(0,0,500,500); var now =new Date(); var sec=now.getSeconds(); var min=now.getMinutes(); var hour=now.getHours(); //小时必须获取浮点类型(小时+分数转化成的小时) hour=hour+min/60; //问题 19:23:30 //将24小时进制转换为12小时 hour=hour>12?hour-12:hour; //表盘(蓝色) cxt.lineWidth=10; cxt.strokeStyle="blue"; cxt.beginPath(); cxt.arc(250,250,200,0,360,false); cxt.closePath(); cxt.fillStyle="#abcdef"; cxt.fill(); cxt.stroke(); //刻度 //时刻度 for(var i=0;i<12;i++){ cxt.save(); //设置时针的粗细 cxt.lineWidth=7; //设置时针的颜色 cxt.strokeStyle="#000"; //先设置0,0点 cxt.translate(250,250); //再设置旋转角度 cxt.rotate(i*30*Math.PI/180);//角度*Math.PI/180=弧度 cxt.beginPath(); cxt.moveTo(0,-170); cxt.lineTo(0,-190); cxt.closePath(); cxt.font="12px 宋体";//css font属性 cxt.fillText(i+"",0,-170); cxt.stroke(); cxt.restore(); } //分刻度 for(var i=0;i<60;i++){ cxt.save(); //设置分刻度的粗细 cxt.lineWidth=5; //设置颜色(使用时刻度的颜色) cxt.strokeStyle="#000"; //设置或者重置画布的0，0点 cxt.translate(250,250); //设置旋转角度 cxt.rotate(i*6*Math.PI/180); //画分针刻度 cxt.beginPath(); cxt.moveTo(0,-180); cxt.lineTo(0,-190); cxt.closePath(); cxt.stroke(); cxt.restore(); } //时针 cxt.save(); //设置时针风格 cxt.lineWidth=7; //设置时针的颜色 cxt.strokeStyle="#000"; //设置异次元空间的0，0点 cxt.translate(250,250); //设置旋转角度 cxt.rotate(hour*30*Math.PI/180); cxt.beginPath(); cxt.moveTo(0,-140); cxt.lineTo(0,10); cxt.closePath(); cxt.stroke(); cxt.restore(); //分针 cxt.save(); //设置分针的风格 cxt.lineWidth=5; cxt.strokeStyle="#000"; //设置异次元空间分针画布的圆心 cxt.translate(250,250); //设置旋转角度 cxt.rotate(min*6*Math.PI/180); cxt.beginPath(); cxt.moveTo(0,-160); cxt.lineTo(0,15); cxt.closePath(); cxt.stroke(); cxt.restore(); //秒针 cxt.save(); //设置秒针的风格 //颜色红色 cxt.strokeStyle="red"; //粗细 3像素 cxt.lineWidth=3; //重置0，0点 cxt.translate(250,250); //设置旋转角度 cxt.rotate(sec*6*Math.PI/180); //画图 cxt.beginPath(); cxt.moveTo(0,-170); cxt.lineTo(0,20); cxt.closePath(); cxt.stroke(); //画出时针、分针、秒针的交叉点、 cxt.beginPath(); cxt.arc(0,0,5,0,360,false); cxt.closePath(); //设置填充样式 cxt.fillStyle="gray"; cxt.fill(); //设置笔触样式(秒针已设置) cxt.stroke(); //设置秒针前段的小圆点 cxt.beginPath(); cxt.arc(0,-150,5,0,360,false); cxt.closePath(); //设置填充样式 cxt.fillStyle="gray"; cxt.fill(); //设置笔触样式(秒针已设置) cxt.stroke(); cxt.restore(); } //使用setInterval(代码,毫秒时间) 让时钟动起来 drawClock(); setInterval(drawClock,1000); </script> </body> </html>
2、太阳系
<!doctype html> <html> <head></head> <body> <canvas id="canvas" width="1000" height="1000" style="background:#000"> 您的浏览器不支持canvas标签 </canvas> <script> //设置2d绘图环境 var cxt=document.getElementById('canvas').getContext('2d'); //轨道 function drawTrack(){ for(var i=0;i<8;i++){ cxt.beginPath(); cxt.arc(500,500,(i+1)*50,0,360,false); cxt.closePath(); //设置笔触的颜色 cxt.strokeStyle="#fff"; cxt.stroke(); } } drawTrack(); //星球 function Star(x,y,radius,cycle,sColor,eColor){ //画出星球需要哪些属性 //星球的坐标点 this.x=x; this.y=y; //星球的半径 this.radius=radius; //公转周期 this.cycle=cycle; //星球的颜色(开始色,结束色) this.sColor=sColor; this.eColor=eColor; //新建一个渐变颜色空对象 this.color=null; //设置一个计时器 this.time=0; this.draw=function(){ //保存之前的画布内容 cxt.save(); //重置0,0坐标点 cxt.translate(500,500); //设置旋转角度 cxt.rotate(this.time*(360/this.cycle)*Math.PI/180); //画星球 cxt.beginPath(); cxt.arc(this.x,this.y,this.radius,0,360,false); cxt.closePath(); //设置星球的填充颜色 //新建渐变对象 this.color=cxt.createRadialGradient(this.x,this.y,0,this.x,this.y,this.radius); //设置渐变效果 this.color.addColorStop(0,this.sColor);//渐变开始点和颜色 this.color.addColorStop(1,this.eColor);//渐变结束点和颜色 cxt.fillStyle=this.color;//将渐变对象复制给填充画笔 //填充星球 cxt.fill(); //恢复之前保存的画布内容 cxt.restore(); //执行完毕之后时间增加 this.time+=1; } } //创建一个太阳对象的构造函数 function Sun(){ Star.call(this,0,0,20,0,"#F00","#f90"); } //创建一个水星的对象构造方法 function Mercury(){ Star.call(this,0,-50,10,87.70,"#A69697","#5C3E40"); } //创建一个金星的对象构造方法 function Venus(){ Star.call(this,0,-100,10,224.701,"#C4BBAC","#1F1315"); } //创建一个地球的对象构造方法 function Earth(){ Star.call(this,0,-150,10,365.224,"#78B1E8","#050C12"); } //创建一个火星的对象构造方法 function Mars(){ Star.call(this,0,-200,10,686.98,"#CEC9B6","#76422D"); } //创建一个木星的对象构造方法 function Jupiter(){ Star.call(this,0,-250,10,4332.589,"#C0A48E","#322222"); } //创建一个土星的对象构造方法 function Saturn(){ Star.call(this,0,-300,10,10759.5,"#F7F9E3","#5C4533"); } //创建一个天王星的对象构造方法 function Uranus(){ Star.call(this,0,-350,10,30799.095,"#A7E1E5","#19243A"); } //创建一个天王星的对象构造方法 function Neptune(){ Star.call(this,0,-400,10,60152,"#0661B2","#1E3B73"); } //创建太阳对象实例 var sun=new Sun(); //创建水星对象实例 var water=new Mercury(); //创建金星对象实例 var gold=new Venus(); //创建一个地球对象实例 var diqiu=new Earth(); //创建一个火星对象实例 var fire=new Mars(); //创建一个木星对象实例 var wood=new Jupiter(); //创建一个土星对象实例 var soil=new Saturn(); //创建一个天王星对象实例 var god=new Uranus(); //创建一个海王星对象实例 var sea=new Neptune(); function move(){ //清除画布 cxt.clearRect(0,0,1000,1000); //画出轨道 drawTrack(); //画出每个星球 sun.draw(); water.draw(); gold.draw(); diqiu.draw(); fire.draw(); wood.draw(); soil.draw(); god.draw(); sea.draw(); } //使个星球进行运动 setInterval(move,10); </script> </body> </html>
3、简单的画图软件
css3样式：
/*页面公共属性设置*/ *{padding:0;margin:0;list-style:none;} body{background:#ABCDEF} /*页面顶部属性设置*/ #header{width:900px;height:80px;font-size:40px;margin:0 auto;text-align:center;line-height:80px} /*页面中间部分(画图板)属性*/ #content{width:880px;height:550px;background:gray;margin:0 auto;padding:10px} #tool{height:150px;text-align:center} #tool li{float:left;width:175px;height:140px;background:#ccc;border-right:1px solid red} #image{text-align:left;padding:20px} #image li{height:30px;width:100px;list-style:square inside;border:0} #image li button{background:gray;border:1px solid #000} #image li button:hover{background:gray;border:1px solid #FFF} #means,#shape{padding:20px} #means li,#shape li{height:20px;width:40px;border:1px solid #000;margin-bottom:10px} #means li:hover,#shape li:hover{height:20px;width:40px;border:1px solid #fff;margin-bottom:10px} #means img,#shape img{height:20px;width:20px} #size{padding:10px} #size li{height:20px;width:120px;border:1px solid #ccc} #size li:hover{height:20px;width:120px;border:1px solid #FFF} #color{padding:25px} #color li{width:20px;height:20px;border:1px solid #000;margin-bottom:10px;margin-right:3px} #color li:hover{width:20px;height:20px;border:1px solid #fff;margin-bottom:10px;margin-right:3px} #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} #canvas{background:white} #canvas:hover{cursor:crosshair } /*页面底部属性设置*/ #footer{width:900px;height:30px;margin:0 auto;text-align:center}
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'); //把12个工具和形状标签放到一个数组中 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'); //把4中线宽对象放到一个数组中 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'); //把10中颜色标签对象放到一个数组中 var colors=[ColorRed,ColorGreen,ColorBlue,ColorYellow,ColorWhite,ColorBlack,ColorPink,ColorPurPle,ColorCyan,ColorOrange]; //设置初始值 //默认选中画笔工具 drawBrush(0); //默认设置颜色 setColor(ColorRed,0); //设置默认线宽 setLineWidth(0); //状态设置函数 function setStatus(Arr,num,type){ for(var i=0;i<Arr.length;i++){ //设置选中的标签改变CSS属性 if(i==num){ //设置改变CSS的样式是背景色还是边框 if(type==1){ 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 saveimg(){ var imgdata=canvas.toDataURL(); var b64=imgdata.substring(22); //alert(b64); //将form表单中的隐藏表单 赋值(值就是我们获取的b64) var data=document.getElementById('data'); data.value=b64; //将表单提交到后台//http://localhost/down.php var form=document.getElementById('myform'); form.submit(); } //清空画布 function clearimg(){ //画布清除方法 cxt.clearRect(0,0,880,400); } //列出所有的按钮对应的函数 //铅笔工具函数 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){ 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; } //鼠标移出canvas的时候必须取消画图操作 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(){ eraserFlag=0; } //抬起鼠标移出画布 清除擦出的状态位 变成0 canvas.onmouseout=function(){ eraserFlag=0; } } //油漆桶工具函数 function drawPaint(num){ setStatus(actions,num,1); canvas.onmousedown=function(){ //把画布涂成指定的颜色->画一个填充颜色的矩形 cxt.fillRect(0,0,880,400); } 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); //alert(obj.data[3]);//ImageData对象 //obj.data=[红,绿,蓝色,透明度]//1像素的数据 //注意:在data数组中，每4个数组元素表示canvas画布中的一个像素点， //这4个元素的取值范围都是0-255 /*obj.data=[ 红,绿,蓝色,透明度, 红,绿,蓝色,透明度, 红,绿,蓝色,透明度, 红,绿,蓝色,透明度, 红,绿,蓝色,透明度， 红,绿,蓝色,透明度, 红,绿,蓝色,透明度, 红,绿,蓝色,透明度, ]//多像素的数据 */ //红色的RGB(255,0,0) //绿色的RGB(0,255,0); var color='rgb('+obj.data[0]+','+obj.data[1]+','+obj.data[2]+')'; //将吸管吸出的颜色设定到我们的应用中 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=400*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; //获取起始点的坐标(相对于canvas画布的) //先获取鼠标距离页面顶端的距离和左端的距离 //evt.pageY evt.pageX //获取当前画布相对页面顶端和左端的距离 //this.offectTop this.offsetLeft //计算当前鼠标相对于canvas画布的距离(以canvas的左上角为0，0) 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; //计算C的距离 var a=endX-arcX; var b=endY-arcY; //计算半径 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; //矩形形状函数 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; //计算矩形的宽高 var rectW=endX-rectX; var 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.beginPath(); //将画笔移动到右下角的顶点 cxt.moveTo(endX,endY); //计算左下角的顶点坐标 var lbX=2*polyX-endX; var lbY=endY; 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; //计算C的距离 var a=endX-arcX; var b=endY-arcY; //计算半径 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; } //矩形填充形状函数 function drawRectFill(num){ setStatus(actions,num,1); 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;//第14讲补充的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; }
html文件：
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>HTML5在线画图板</title> <link href="canvas.css" type="text/css" rel="stylesheet" /> </head> <body> <header id="header">HTML5在线画板</header> <section id="content"> <!--工具区域--> <ul id="tool"> <li> <h3>图像</h3> <hr /> <ul id="image"> <li id="saveimg"> <form id="myform" action="http://localhost/down.php" method="post"> <input type="hidden" id="data" name="data" value="" /> <button onclick="saveimg()" type="button">保存图片</button> </form> </li> <li id="clearimg"><button onclick="clearimg()">清空画板</button></li> </ul> </li> <li> <h3>工具</h3> <hr /> <ul id="means"> <li id="means_brush" onclick="drawBrush(0)"> <img src="images/Brush.png" /> </li> <li id="means_eraser" onclick="drawEraser(1)"> <img src="images/Eraser.png" /> </li> <li id="means_paint" onclick="drawPaint(2)"> <img src="images/Paint.png" /> </li> <li id="means_straw" onclick="drawStraw(3)"> <img src="images/Straw.png" /> </li> <li id="means_text" onclick="drawText(4)"> <img src="images/text.png" /> </li> <li id="means_magnifier" onclick="drawMagnifier(5)"><img src="images/Magnifier.png" /></li> </ul> </li> <li> <h3>形状</h3> <hr /> <ul id="shape"> <li id="shape_line" onclick="drawLine(6)"> <img src="images/line.png" /> </li> <li id="shape_arc" onclick="drawArc(7)"> <img src="images/arc.png" /> </li> <li id="shape_rect" onclick="drawRect(8)"> <img src="images/rect.png" /> </li> <li id="shape_poly" onclick="drawPoly(9)"> <img src="images/poly.png" /> </li> <li id="shape_arcfill" onclick="drawArcFill(10)"> <img src="images/arcfill.png" /> </li> <li id="shape_rectfill" onclick="drawRectFill(11)"> <img src="images/rectfill.png" /> </li> </ul> </li> <li> <h3>线宽</h3> <hr /> <ul id="size"> <li id="width_1" onclick="setLineWidth(0)"> <img src="images/line1px.png" /> </li> <li id="width_3" onclick="setLineWidth(1)"> <img src="images/line3px.png" /> </li> <li id="width_5" onclick="setLineWidth(2)"> <img src="images/line5px.png" /> </li> <li id="width_8" onclick="setLineWidth(3)"> <img src="images/line8px.png" /> </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> <!--绘图区域--> <canvas id="canvas" width="880" height="400"> 您的浏览器不支持canvas标签，请升级浏览器 </canvas> <!--请在canvas标签之后连入JS文件---> <script src="canvas.js"></script> </section> <footer id="footer"> <small>版权所有，盗版不究 @ LAMP兄弟连丛浩</small> </footer> </body> </html>