在线画图工具
技术需求分析
页面布局-->HTML5标签
页面美化-->CSS2
功能设置-->javascript编程
CanvasAPI
画直线功能分析
鼠标点下去的时候-->获取直线的开始
鼠标抬起来的时候-->获取直线的结束点
鼠标移动的时候-->不做任何操作
鼠标移出画布的时候也不做任何操作
画圆圈的功能分析
鼠标点下去的时候-->获取的是圆圈的圆心
鼠标抬起的时候-->先获取了半径,画出圆
鼠标移动-->不需要操作
鼠标移出画布-->不需要操作
画矩形的功能分析
鼠标按下的时候-->获取矩形的开始点
鼠标抬起的时候-->获取矩形对角线的结束点,计算出宽高,然后画出矩形
画三角形的功能分析
鼠标点下去的时候-->获取三角形的中心点
鼠标抬起来的时候-->获取三角形右下角的顶点
鼠标移动的时候-->不做任何操作
鼠标移出画布的时候也不做任何操作
橡皮擦功能
鼠标点击的时候-->擦除点击处所在的部分区域
鼠标移动的时候-->随着鼠标的移动,擦除移动过的地方
鼠标抬起的时候-->取消擦除事件
鼠标移出的时候-->取消擦除事件
油漆桶功能
鼠标点击在canvas画布的时候-->把整个画布变成一种颜色
鼠标移动-->不做操作
鼠标抬起-->不做操作
鼠标移出画布-->不做操作
文本功能分析
鼠标点击时触发写字的方法;
鼠标移动不需要-->不需要操作
鼠标抬起-->不需要操作
鼠标移出-->也不需要操作
onlineCanvas.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" name="data" id="data" value=""/>
<button οnclick="saveImg()">保存图片</button>
</form>
</li>
<li id="clearimg" οnclick="clearImg()"><button>清空画板</button></li>
</ul>
</li>
<li>
<h3>工具</h3>
<hr/>
<ul id="means">
<li id="means_brush" οnclick="drawBrush(0)"><image src="images/2.jpg"/></li>
<li id="means_eraser" οnclick="drawEraser(1)"><image src="images/2.jpg"/></li>
<li id="means_paint" οnclick="drawPaint(2)"><image src="images/2.jpg"/></li>
<li id="means_straw" οnclick="drawStraw(3)"><image src="images/2.jpg"/></li>
<li id="means_text" οnclick="drawText(4)"><image src="images/2.jpg"/></li>
<li id="means_magnifier" οnclick="drawMagnifier(5)"><image src="images/2.jpg"/></li>
</ul>
</li>
<li>
<h3>形状</h3>
<hr/>
<ul id="shape">
<li id="shape_line" οnclick="drawLine(6)"><image src="images/2.jpg"/></li>
<li id="shape_arc" οnclick="drawArc(7)"><image src="images/2.jpg"/></li>
<li id="shape_rect" οnclick="drawRect(8)"><image src="images/2.jpg"/></li>
<li id="shape_poly" οnclick="drawPoly(9)"><image src="images/2.jpg"/></li>
<li id="shape_arcfill" οnclick="drawArcFill(10)"><image src="images/2.jpg"/></li>
<li id="shape_rectfill" οnclick="drawRectFill(11)"><image src="images/2.jpg"/></li>
</ul>
</li>
<li>
<h3>线宽</h3>
<hr/>
<ul id="size">
<li id="width_1" οnclick="setLineWidth(0)"><image src="images/2.jpg"/></li>
<li id="width_3" οnclick="setLineWidth(1)"><image src="images/2.jpg"/></li>
<li id="width_5" οnclick="setLineWidth(2)"><image src="images/2.jpg"/></li>
<li id="width_8" οnclick="setLineWidth(3)"><image src="images/2.jpg"/></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>
<!--绘图区域-->
<canvas id="canvas" width="880" height="400">
您的浏览器不支持canvas标签,请升级浏览器
</canvas>
<!--请在canvas标签之后连入js文件-->
<script src="canvas.js"></script>
</section>
<footer id="footer">
<small>版权所有,盗版不究@pengbina.com.cn</small>
</footer>
</body>
</html>
canvas.js
//获取工具按钮的标签
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];
var canvas=document.getElementById("canvas");
var cxt=canvas.getContext("2d");
//设置初始值
//默认选中画笔工具
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 #CCC";
}
}
}
}
//设置图像功能函数 保存图片 清空画布
function saveImg(){
var imgdata=canvas.toDataURL();
//data协议格式:data:资源类型;编码,内容
//data:text/html;ascii,亲,包邮不
var b64=imgdata.substring(22);
//将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.οnmοusedοwn=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){
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;
}
//鼠标移出canvas的时候必须取消画图操作
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(){
eraserFlag=0;
}
//鼠标移出画布 清除擦除状态位 变成0
canvas.οnmοuseοut=function(){
eraserFlag=0;
}
}
//油漆桶工具函数
function drawPaint(num){
setStatus(actions,num,1);
canvas.οnmοusedοwn=function(){
//把画布涂成指定的颜色-->画一个填充颜色的矩形
cxt.fillRect(0,0,880,400);
}
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.width obj.height obj.data
//obj.data=[红色,绿色,蓝色,透明度]//1像素的数据
/**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.ο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;
//获取用户输入的信息
//window.prompt(对话框提示,默认值);
var userVal=window.prompt('请在这里输入文字','');
//将用户输入的文字写道画布中对应的坐标点上
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=400*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;
//获取起始点的坐标(相对于canvas画布的)
//先获取鼠标距离页面顶端的距离和左端的距离
//evt.pageY evt.pageX
//获取当前画布相对页面顶端和左端的距离
//this.offsetTop 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.ο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();
}
}
//圆形状函数
function drawArc(num){
setStatus(actions,num,1);
var arcX;
var arcY;
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=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.οnmοusemοve=null;//注释掉鼠标移动事件
canvas.οnmοuseοut=null;
}
//方框函数
function drawRect(num){
setStatus(actions,num,1);
var rectX=0;
var rectY=0;
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.strokeRect(rectX,rectY,rectW,rectH);
}
canvas.οnmοusemοve=null;
canvas.οnmοuseοut=null;
}
//多标签函数
function drawPoly(num){
setStatus(actions,num,1);
var polyX;
var polyY;
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.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坐标,X是顶点的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);
var arcX;
var arcY;
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=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.οnmοusemοve=null;//注释掉鼠标移动事件
canvas.οnmοuseοut=null;
}
//矩形标签函数
function drawRectFill(num){
setStatus(actions,num,1);
var rectX=0;
var rectY=0;
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;
}
canvas.css
/**页面公共属性设置**/
*{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;}
#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,#size img{height:20px;width:20px;}
#size{padding:10px;}
#size li{height:20px;width:30px;border:1px solid #000}
#size li:hover{height:20px;width:30px;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;}
/**页面底部属性设置**/
#footer{width:900px;height:30px;margin:0 auto;text-align:center;}
down.php
<?php
//声明文件的类型 MIME数据类型
header('Content-type:image/png');
//文件的相关描述
header('Content-Disposition:attachment;filename="canvas.png"');
//文件的内容
echo base64_decode($_POST['data']);
?>