html5在线画板
来源：互联网 发布：服务器安全防护软件 编辑：程序博客网 时间：2024/05/01 09:43
http://jyffly.applinzi.com/canvas/index.html
效果演示：
页面布局：(draw_board.html)
<!DOCTYPE html><html><head> <title>drawing board</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="paint.css"> <script type="text/javascript" src="jquery-1.10.2.min.js"></script></head><body><header id="head"> <p>HTML5在线画板</p> </header><section id="draw_board"> <ul id="menu"> <li id="function">图像<hr/> <ul> <li id="save_pic"> <form id="form" action="downimg.php" method="post"> <input type="hidden" id="data" name="data" value=""></input> <button type="button" onclick="Saveing()">保存图片</button> </form> </li> <li id="clear_pic"><button onclick="Clear()">清空画板</button></li> </ul> </li> <li id="tools">工具<hr/> <ul> <li id="brush" onclick="Brush(0)"><img src="images/Brush.png"></li> <li id="eraser" onclick="Eraser(1)"><img src="images/Eraser.png"></li> <li id="paint" onclick="Paint(2)"><img src="images/Paint.png"></li> <li id="straw" onclick="Straw(3)"><img src="images/Straw.png"></li> <li id="text" onclick="Text(4)"><img src="images/text.png"></li> <li id="magnifier" onclick="Magnifier(5)"><img src="images/Magnifier.png"></li> </ul> </li> <li id="shape">形状<hr/> <ul> <li id="line" onclick="Line(6)"><img src="images/line.png"></li> <li id="rect" onclick="Rect(7)"><img src="images/rect.png"></li> <li id="arc" onclick="Arc(8)"><img src="images/arc.png"></li> <li id="poly" onclick="Poly(9)"><img src="images/poly.png"></li> <li id="rectfill" onclick="Rectfill(10)"><img src="images/rectfill.png"></li> <li id="arcfill" onclick="Arcfill(11)"><img src="images/arcfill.png"></li> </ul> </li> <li id="line">线宽<hr/> <ul> <li id="line1px" onclick="Line1px(0)"><img src="images/line1px.png"></li> <li id="line3px" onclick="Line3px(1)"><img src="images/line3px.png"></li> <li id="line5px" onclick="Line5px(2)"><img src="images/line5px.png"></li> <li id="line8px" onclick="Line8px(3)"><img src="images/line8px.png"></li> </ul> </li> <li id="color">颜色<hr/> <ul> <li id="red" onclick="Red()"></li> <li id="green" onclick="Green()"></li> <li id="blue" onclick="Blue()"></li> <li id="yellow" onclick="Yellow()"></li> <li id="white" onclick="White()"></li> <li id="black" onclick="Black()"></li> <li id="pink" onclick="Pink()"></li> <li id="purple" onclick="Purple()"></li> <li id="cyan" onclick="Cyan()"></li> <li id="orange" onclick="Orange()"></li> </ul> </li> </ul> <canvas id="mycanvas" width="880px" height="380px" style="cursor:crosshair;background:#fff;"></canvas></section><footer id="foot"> <small>版权所有 jyffly@qq.com</small></footer><!--很常见的一个错误：getElementById ()只有在文档加载,完成成功，才能获取,所以，引入canvas.js要放在后面。--><script type="text/javascript" src="canvas.js"></script></body></html>样式设计：（paint.css）
*{padding: 0;margin: 0;}body{background-color: #abcdef;}#head{width: 900px;height: 80px;margin:0 auto;}#head p{font-size: 40px; text-align: center;line-height: 80px;}#draw_board{width: 900px;height: 560px;background: #808080;margin: 0 auto;padding-top: 10px;}#menu{width: 880px;height:160px;background: #ccc;margin-left: 10px;}#menu li{float: left; list-style-type: none;height: 160px; width:175px; border-right:1px solid red;text-align: center;}#function ul li{ width:170px; height:35px;border:0 ; line-height:35px;}#save_pic button{background:#808080;}#clear_pic button{background:#808080;}#tools ul,#shape ul,#line ul,#color ul {padding:10px 15px;}#tools ul li,#shape ul li,#line ul li{width:45px; height:25px;border:1px black solid ; line-height:25px;margin-bottom: 10px;}#tools ul li img,#shape ul li img{width:25px; height:25px;}#line ul li{width: 150px;height: 25px;border:0;line-height:25px;margin-bottom: 3px; }#line ul li img{width:150px;height: 8px;}#color ul li{width:25px; height:25px;border:1px black solid ; line-height:25px;margin-bottom: 10px;}#red{background:red;}#green{background:green;}#blue{background:blue;}#yellow{background:yellow;}#white{background:white;}#black{background:black;}#pink{background:pink;}#purple{background:purple;}#cyan{background:cyan;}#orange{background:orange;}#mycanvas{background: #fff;margin:10px;}#foot{width: 900px;height: 60px;margin: 0 auto;}#foot small{text-align: center; display: block;}js代码：（canvas.js）
//工具和形状选中一个，设置被选中状态//很常见的一个错误：getElementById ()只有在文档加载,完成成功，才能获取,所以，引入canvas.js要放在后面。 var canvas = document.getElementById('mycanvas'); var cxt = canvas.getContext("2d"); cxt.strokeStyle = "#000"; cxt.fillStyle = "#000"; var brush = document.getElementById('brush'); var eraser = document.getElementById('eraser'); var paint = document.getElementById('paint'); var straw = document.getElementById('straw'); var text = document.getElementById('text'); var magnifier = document.getElementById('magnifier'); var line = document.getElementById('line'); var rect = document.getElementById('rect'); var arc = document.getElementById('arc'); var poly = document.getElementById('poly'); var rectfill = document.getElementById('rectfill'); var arcfill = document.getElementById('arcfill'); var tools=[brush,eraser,paint,straw,text,magnifier,line,rect,arc,poly,rectfill,arcfill]; //e:具体工具 type:工具数组 flag:2种不同的显示法(工具和形状,线宽中，背景变色;颜色中，边框变色) function choice_tools(e,type,flag) { for(var i = 0; i<type.length;i++){ if (flag) { if(i==e){type[i].style.backgroundColor="yellow";} else{type[i].style.backgroundColor="#ccc";} } else { if(i==e){type[i].style.borderColor="white";} else{type[i].style.borderColor="black";} } //html中onclick="choice_tools('brush')" //if(tools[i].id==event){$("#"+event).css({"background-color":"yellow"});} //else{event.css({"background-color":"#ccc"});} //if(tools[i].id==event){document.getElementById(event).style.backgroundColor="yellow";} //else{document.getElementById(event).style.backgroundColor="#ccc";} //html中onclick="choice_tools(this)" //$(event)把一个普通的dom对象转化成jquery对象 //if(tools[i].id==event.id){$(event).css({"background-color":"yellow"});} //else{$(event).css({"background-color":"yellow"});} //if(tools[i].id==event.id){event.style.backgroundColor="yellow";} //else{event.style.backgroundColor="#ccc";} }}//保存图片function Saveing() { //canvas中的toDataURl()方法可以把画布中的图案转化成base64格式的png图片，，然后返回 Data URL数据 var imageData = canvas.toDataURL("image/jpeg"); var b64 = imageData.substring(23); var data = document.getElementById("data"); data.value = b64; var form = document.getElementById("form"); form.submit();//调用系统的自动提交表单}//清空画板function Clear() { cxt.beginPath(); cxt.strokeStyle = "#fff"; cxt.fillStyle ="#fff"; cxt.fillRect(0,0,880,380);//注意这里不用clearRect() cxt.strokeStyle ="#000"; cxt.fillStyle ="#000"; cxt.closePath();}//注意function 不要打错//工具function Brush(e){ choice_tools(0,tools,true); cxt.beginPath(); var flag = false;//判断鼠标是否按下 canvas.onmousedown = function (e) { flag = true;//e是鼠标按下事件，this是画布canvas.//pageX是相对于浏览器的，offsetLeft是相对于父级容器的 var startx = e.pageX-this.offsetLeft; var starty = e.pageY-this.offsetTop; cxt.moveTo(startx,starty); } canvas.onmousemove = function (e) { var endx = e.pageX-this.offsetLeft; var endy = e.pageY-this.offsetTop; if(flag){ cxt.lineTo(endx,endy); cxt.stroke(); } } canvas.onmouseup = function(){ flag = false; } canvas.onmouseout = function(){ flag = false; } cxt.closePath();}//橡皮擦(和铅笔工具一样，只是白色的)function Eraser(e){ choice_tools(1,tools,true); cxt.fillStyle = "#fff"; cxt.strokeStyle = "#fff"; cxt.beginPath(); var flag = false;//判断鼠标是否按下 canvas.onmousedown = function (e) { flag = true;//e是鼠标按下事件，this是画布canvas.//pageX是相对于浏览器的，offsetLeft是相对于父级容器的 var startx = e.pageX-this.offsetLeft; var starty = e.pageY-this.offsetTop; cxt.moveTo(startx,starty); } canvas.onmousemove = function (e) { var endx = e.pageX-this.offsetLeft; var endy = e.pageY-this.offsetTop; if(flag){ cxt.lineTo(endx,endy); cxt.stroke(); } } canvas.onmouseup = function(){ flag = false; } canvas.onmouseout = function(){ flag = false; } cxt.closePath();}//油漆桶function Paint(e){ choice_tools(2,tools,true); cxt.fillRect(0,0,880,380);}//吸管工具function Straw(e){ choice_tools(3,tools,true); var x = 0; var y = 0; var imagedata; canvas.onmousedown = function (e) { x = e.pageX-this.offsetLeft; y = e.pageY-this.offsetTop; imagedata = cxt.getImageData(x,y,1,1); //data[0],data[1],data[2],data[3],是红绿蓝和透明度 var red = imagedata.data[0]; var green = imagedata.data[1]; var blue = imagedata.data[2]; //注意这里的拼接字符串,rgb要是一个字符串 cxt.fillStyle = 'rgb('+red+','+green+','+blue+')'; cxt.strokeStyle ='rgb('+red+','+green+','+blue+')'; Brush(0); } canvas.onmousemove = null; canvas.onmouseup = null; canvas.onmouseout = null;}//文本工具function Text(e){ choice_tools(4,tools,true); var x = 0; var y = 0; cxt.font = "20px Georgia"; canvas.onmousedown = function (e) { x = e.pageX-this.offsetLeft; y = e.pageY-this.offsetTop; cxt.fillText(window.prompt("请输入文字",""),x,y); } canvas.onmousemove = null; canvas.onmouseup = null; canvas.onmouseout = null;}//放大镜(尽是画布成比例放大缩小)function Magnifier(e){ choice_tools(5,tools,true); //prompt返回值是字符串 var s =parseInt(window.prompt("请输入放大比例","100")); canvas.style.whith =parseInt(880*s/100)+'px'; canvas.style.height =parseInt(380*s/100)+'px';}//形状function Line(e){ choice_tools(6,tools,true); //直线起点 cxt.beginPath(); canvas.onmousedown = function(e){ var startx = e.pageX-this.offsetLeft; var starty = e.pageY-this.offsetTop; cxt.moveTo(startx,starty); } //直线终点 canvas.onmouseup = function(e){ var endx = e.pageX-this.offsetLeft; var endy = e.pageY-this.offsetTop; cxt.lineTo(endx,endy); cxt.closePath(); cxt.stroke(); } canvas.onmousemove = null; canvas.onmouseout = null;}function Rect(e){ choice_tools(7,tools,true); //矩形左上角的点 cxt.beginPath(); var startx = 0; var starty = 0; var endx = 0; var endy = 0; canvas.onmousedown = function(e){ startx = e.pageX-this.offsetLeft; starty = e.pageY-this.offsetTop; } //矩形右下角的点 canvas.onmouseup = function(e){ endx = e.pageX-this.offsetLeft; endy = e.pageY-this.offsetTop; cxt.strokeRect(startx,starty,endx-startx,endy-starty); cxt.closePath(); } canvas.onmousemove = null; canvas.onmouseout = null;}function Arc(e){ choice_tools(8,tools,true); var startx = 0; var starty = 0; var endx = 0; var endy = 0; var r = 0; //半径 canvas.onmousedown = function(e){ startx = e.pageX-this.offsetLeft; starty = e.pageY-this.offsetTop; } canvas.onmouseup = function(e){ endx = e.pageX-this.offsetLeft; endy = e.pageY-this.offsetTop; r = Math.sqrt((endx-startx)*(endx-startx)+(endy-starty)*(endy-starty)); cxt.beginPath(); cxt.arc(startx,starty,r/2,0,360,false); cxt.stroke(); cxt.closePath(); cxt.stroke(); } canvas.onmousemove = null; canvas.onmouseout = null;}function Poly(e){ //等边三角形，已知两点(上和右),求第三个点坐标公式： //tanα=(y1-y2)/(x1-x2) ，x3=x2+L*cos(α+60)；y3=y2+L*sin(α+60) choice_tools(9,tools,true); var startx = 0; var starty = 0; var endx = 0; var endy = 0; var L = 0; var tanα = 0; var x3 = 0; var y3 = 0; canvas.onmousedown = function(e){ startx = e.pageX-this.offsetLeft; starty = e.pageY-this.offsetTop; } canvas.onmouseup = function(e){ endx = e.pageX-this.offsetLeft; endy = e.pageY-this.offsetTop; L = Math.sqrt((endx-startx)*(endx-startx)+(endy-starty)*(endy-starty)); tanα = (endy - starty)/(endx-startx); //注意：Math.atan(s)中的s是弧度不是角度 x3=startx+L*Math.cos(Math.atan((endy - starty)/(endx-startx))+Math.PI/3); y3=starty+L*Math.sin(Math.atan((endy - starty)/(endx-startx))+Math.PI/3); cxt.beginPath(); cxt.moveTo(startx,starty);//三角形上面的点(startx,starty) cxt.lineTo(endx,endy);//三角形右面的点(endx,endy) cxt.lineTo(x3,y3); cxt.closePath(); cxt.stroke(); } canvas.onmousemove = null; canvas.onmouseout = null;}function Rectfill(e){ choice_tools(10,tools,true); cxt.beginPath(); var startx = 0; var starty = 0; var endx = 0; var endy = 0; canvas.onmousedown = function(e){ startx = e.pageX-this.offsetLeft; starty = e.pageY-this.offsetTop; } //矩形右下角的点 canvas.onmouseup = function(e){ endx = e.pageX-this.offsetLeft; endy = e.pageY-this.offsetTop; cxt.fillRect(startx,starty,endx-startx,endy-starty); cxt.closePath(); } canvas.onmousemove = null; canvas.onmouseout = null;}function Arcfill(e){ choice_tools(11,tools,true); cxt.beginPath(); var startx = 0; var starty = 0; var endx = 0; var endy = 0; var r = 0; //半径 canvas.onmousedown = function(e){ startx = e.pageX-this.offsetLeft; starty = e.pageY-this.offsetTop; } canvas.onmouseup = function(e){ endx = e.pageX-this.offsetLeft; endy = e.pageY-this.offsetTop; r = Math.sqrt((endx-startx)*(endx-startx)+(endy-starty)*(endy-starty)); cxt.arc(startx,starty,r,0,360,false); cxt.closePath(); cxt.fill(); } canvas.onmousemove = null; canvas.onmouseout = null;}//默认选中铅笔window.onload=function () { cxt.fillStyle = "#fff"; cxt.fillRect(0,0,880,380); cxt.fillStyle = "#000"; Brush(0);}//设置线粗选中的背景var line1px = document.getElementById("line1px");var line3px = document.getElementById("line3px");var line5px = document.getElementById("line5px");var line8px = document.getElementById("line8px");var lines = [line1px,line3px,line5px,line8px];function Line1px(e) { choice_tools(0,lines,true); cxt.beginPath(); cxt.lineWidth= 1; cxt.closePath();}function Line3px(e) { choice_tools(1,lines,true); cxt.beginPath(); cxt.lineWidth = 3; cxt.closePath();}function Line5px(e) { choice_tools(2,lines,true); cxt.beginPath(); cxt.lineWidth = 5; cxt.closePath();}function Line8px(e) { choice_tools(3,lines,true); cxt.beginPath(); cxt.lineWidth = 8; cxt.closePath();}//设置颜色选择时，线框变白色var red = document.getElementById("red");var green = document.getElementById("green");var blue = document.getElementById("blue");var yellow = document.getElementById("yellow");var white = document.getElementById("white");var black = document.getElementById("black");var pink = document.getElementById("pink");var purple = document.getElementById("purple");var cyan = document.getElementById("cyan");var orange = document.getElementById("orange");var colors = [red,green,blue,yellow,white,black,pink,purple,cyan,orange];function Red(e){ choice_tools(0,colors,false); cxt.beginPath(); cxt.strokeStyle="red"; cxt.fillStyle="red"; cxt.closePath();}function Green(e) { choice_tools(1,colors,false); cxt.beginPath(); cxt.strokeStyle="green"; cxt.fillStyle="green"; cxt.closePath();}function Blue(e){ choice_tools(2,colors,false); cxt.beginPath(); cxt.strokeStyle="blue"; cxt.fillStyle="blue"; cxt.closePath();}function Yellow(e){ choice_tools(3,colors,false); cxt.beginPath(); cxt.strokeStyle="yellow"; cxt.fillStyle="yellow"; cxt.closePath();}function White(e){ choice_tools(4,colors,false); cxt.beginPath(); cxt.strokeStyle="white"; cxt.fillStyle="white"; cxt.closePath();}function Black(e){ choice_tools(5,colors,false); cxt.beginPath(); cxt.strokeStyle="black"; cxt.fillStyle="black"; cxt.closePath();}function Pink(e){ choice_tools(6,colors,false); cxt.beginPath(); cxt.strokeStyle="pink"; cxt.fillStyle = "pink"; cxt.closePath();}function Purple(e){ choice_tools(7,colors,false); cxt.beginPath(); cxt.strokeStyle="purple"; cxt.fillStyle="purple"; cxt.closePath();}function Cyan(e){ choice_tools(8,colors,false); cxt.beginPath(); cxt.strokeStyle="cyan"; cxt.fillStyle="cyan"; cxt.closePath();}function Orange(e){ choice_tools(9,colors,false); cxt.beginPath(); cxt.strokeStyle="orange"; cxt.fillStyle="orange"; cxt.closePath();} 1 0
- html5在线画板
- 简单的HTML5在线画板
- HTML5 Canvas 制作一个“在线画板”
- HTML5 Canvas 制作一个“在线画板”
- 小强的HTML5移动开发之路（10）——在线画板
- HTML5移动开发之路（7）——在线画板
- 小强的HTML5移动开发之路（10）——在线画板
- html5 canvas 画板
- HTML5 Canvas实例画板
- html5 canvas自定义画板
- 基于html5的画板程序
- 一个简单的html5画板
- 一个简单的html5画板
- html5+javascript制作简易画板
- js和html5实现画板
- HTML5 canvas画板的制作
- HTML5 -- canvas实现简易画板
- HTML5 -- canvas画板转为图片
- c#之剪刀石头布
- c#之剪刀石头布
- get与post提交方式的区别
- 教程Roll-a-ball tutorialMoving the Player 解读
- hihocoder之01背包
- html5在线画板
- 练习4.1-5最大子数组线性算法及证明
- 给牛牛上编程课——第三次课（字符串的存储和打印、转义字符）
- 【POJ2774】Long Long Message【后缀数组】
- cocos2d-x tableView
- 20160210，微软2月10日发布13个安全补丁
- Trie（数字树、字典树、前缀树）
- 【5-3】hadoop集群搭建
- Android TV -5.1- Developing a TV Input Service
