用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 οnclick="saveimg()">保存图片</button></li>
<input type="hidden" name="data" id="data"/>
</form>
<li id="clearimg"><button οnclick="clearimag()">清空画板</button></li>
</ul>
</li>
<li><h3>工具</h3><hr />
<ul id="means">
<li id="means_brush" οnclick="drawBrush(0)"><img src="img/Brush.png" alt="" /></li>
<li id="means_eraser" οnclick="drawEraser(1)"><img src="img/Eraser.png"/></li>
<li id="means_paint" οnclick="drawPaint(2)"><img src="img/Paint.png" alt="" /></li>
<li id="means_straw" οnclick="drawStraw(3)"><img src="img/Straw.png" alt="" /></li>
<li id="means_text" οnclick="drawText(4)"><img src="img/text.png" alt="" /></li>
<li id="means_magnifier" οnclick="drawMagnifier(5)"><img src="img/magnifier.png" alt="" /></li>
</ul>
</li>
<li><h3>形状</h3><hr />
<ul id="shape">
<li id="shape_line" οnclick="drawLine(6)"><img src="img/line.png" alt="" /></li>
<li id="shape_arc" οnclick="drawArc(7)"><img src="img/arc.png"/></li>
<li id="shape_rect" οnclick="drawRect(8)"><img src="img/rect.png" alt="" /></li>
<li id="shape_poly" οnclick="drawPoly(9)"><img src="img/poly.png" alt="" /></li>
<li id="shape_arcfill" οnclick="drawArcfill(10)"><img src="img/arcfill.png" alt="" /></li>
<li id="shape_rectfill" οnclick="drawRectfill(11)"><img src="img/rectfill.png" alt="" /></li>
</ul>
</li>
<li><h3>线宽</h3><hr />
<ul id="size">
<li id="width_1" οnclick="setLineWidth(0)"><img src="img/line1px.png" alt="" /></li>
<li id="width_3" οnclick="setLineWidth(1)"><img src="img/line3px.png"/></li>
<li id="width_5" οnclick="setLineWidth(2)"><img src="img/line5px.png" alt="" /></li>
<li id="width_8" οnclick="setLineWidth(3)"><img src="img/line8px.png" alt="" /></li>
</ul>
</li>
<li><h3>颜色</h3><hr />
<ul id="color">
<li id="red" οnclick="setColor(this,0)"></li>
<li id="green" οnclick="setColor(this,1)"></li>
<li id="blue" οnclick="setColor(this,2)"></li>
<li id="yellow" οnclick="setColor(this,3)"></li>
<li id="white" οnclick="setColor(this,4)"></li>
<li id="black" οnclick="setColor(this,5)"></li>
<li id="pink" οnclick="setColor(this,6)"></li>
<li id="purple" οnclick="setColor(this,7)"></li>
<li id="cyan" οnclick="setColor(this,8)"></li>
<li id="orange" οnclick="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>
/*页面公共属性设置*/
*{
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;
}
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.php
var 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.οnmοusemοve=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.οnmοuseup=function(){
flag=0;
}
// 鼠标移出时flag=0;
canvas.οnmοuseοut=function(){
flag=0;
}
}
//橡皮擦函数
var eraserFlag=0;//橡皮擦的状态标志位
function drawEraser(num){
setStatus(actions,num,1)
canvas.οnmοusedοwn=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.οnmοusemοve=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.οnmοuseup=function(evt){
evt=window.event||evt;
eraserFlag=0;
}
// 鼠标移出画笔标志位设置为0
canvas.οnmοuseοut=function(evt){
evt=window.event||evt;
eraserFlag=0;
}
}
//油漆桶函数（整个画布变成一个颜色）
function drawPaint(num){
setStatus(actions,num,1)
canvas.οnmοusedοwn=function(){
// 把画布图成指定颜色
evt=window.event||evt;
cxt.fillRect(rectX,rectY,rectW,rectH);
}
canvas.οnmοuseup=null;
canvas.οnmοusemοve=null;
canvas.οnmοuseοut=null;
}
//吸管函数
function drawStraw(num){
setStatus(actions,num,1)
canvas.οnmοusedοwn=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 .οnmοusemοve=null;
canvas.οnmοuseup=null;
canvas.οnmοuseοut=null;
}
//文本函数
function drawText(num){
setStatus(actions,num,1)
canvas.οnmοusedοwn=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.οnmοusemοve=null;
canvas.οnmοuseup=null;
canvas.οnmοuseοut=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.οnmοusedοwn=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.οnmοusemοve=null;//注销掉不做的事件
canvas.οnmοuseοut=null;//鼠标移走没有事件
// 鼠标键抬起来的时候
canvas.οnmοuseup=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.οnmοusedοwn=function(evt){
// 获取圆心的位置
evt=window.event||evt;
arcX=evt.pageX-this.offsetLeft;
arcY=evt.pageY-this.offsetTop;
}
canvas.οnmοuseup=function(evt){
// 获取半径(实际是一个坐标)
evt=window.event||evt;
var endX=evt.pageX-this.offsetLeft;
var endY=evt.pageY-this.offsetTop;
// 计算两点的距离也就是圆的r
var 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.οnmοusemοve=null;
canvas.οnmοuseοut=null;
}
//设置矩形全局变量
var rectX=0;
var rectY=0;
var rectW=0;
var rectH=0;
//画矩形函数
function drawRect(num){
setStatus(actions,num,1)
canvas.οnmοusedοwn=function(evt){
evt=window.event||evt;
//获取矩形对角线的第一个点坐标
rectX=evt.pageX-this.offsetLeft;
rectY=evt.pageY-this.offsetTop;
}
canvas.οnmοuseup=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.οnmοusemοve=null;
canvas.οnmοuseοut=null;
}
//画多边行（三角形）函数
//全局变量
var polyX=0;
var polyY=0;
function drawPoly(num){
setStatus(actions,num,1)
canvas.οnmοusedοwn=function(evt){
evt=window.event||evt;
polyX=evt.pageX-this.offsetLeft;
polyY=evt.pageY-this.offsetTop;
}
canvas.οnmοuseup=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.οnmοusemοve=null;
canvas.οnmοuseοut=null;
}
//画实心圆函数
function drawArcfill(num){
setStatus(actions,num,1)
canvas.οnmοusedοwn=function(evt){
// 获取圆心的位置
evt=window.event||evt;
arcX=evt.pageX-this.offsetLeft;
arcY=evt.pageY-this.offsetTop;
}
canvas.οnmοuseup=function(evt){
// 获取半径(实际是一个坐标)
evt=window.event||evt;
var endX=evt.pageX-this.offsetLeft;
var endY=evt.pageY-this.offsetTop;
// 计算两点的距离也就是圆的r
var 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.οnmοusemοve=null;
canvas.οnmοuseοut=null;
}
设置矩形全局变量,全局变量设置一次就行行了
//var rectX=0;
//var rectY=0;
//画填充矩形函数
function drawRectfill(num){
setStatus(actions,num,1)
canvas.οnmοusedοwn=function(evt){
evt=window.event||evt;
//获取矩形对角线的第一个点坐标
rectX=evt.pageX-this.offsetLeft;
rectY=evt.pageY-this.offsetTop;
}
canvas.οnmοuseup=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.οnmοusemοve=null;
canvas.οnmοuseοut=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万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
