本章概要
1.画图板功能分析
2.画图板技术分析
3.绘制页面、美化页面
4.编辑功能。先画一个简单的画图板分析思路,然后应用到项目中。
画图板功能分析
1.功能区(保存、清空)
2.工具区(形状和工具)
属性设置区(颜色和线宽)
4.绘图区域(canvas标签)
技术需求分析
1.页面布局————HTML5标签
2.页面美化————CSS2
3.功能设置————js编程
4.canvas api————属性设置、画线、写字、画图、画布操作(清空、获取画布信息)
5、下载————php的下载(js无法操作本地文件)
图像:
单独的按钮组,保存图片、清楚画布
操作组(所有按钮只能选取一个):
工具(画笔、橡皮、油漆桶、吸管、文字、放大)
形状(画线、画圆圈、画方框、画三角形、画圆形、画方形)
粗细(线宽只能选择一个)
1px,3px,5px,8px
颜色(颜色只能选择一个)
红、绿、蓝、黄、白、黑、粉、紫、青、橙
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5在线画图板</title>
<link rel="stylesheet" href="css/canvas.css" type="text/css"/>
</head>
<body>
<header id="header">HTML5在线画图板</header>
<section id="content">
<!--工具区域-->
<ul id="tool">
<li>
<h3>图像</h3>
<hr />
<ul id="image">
<li><button>保存图片</button></li>
<li><button>清空画板</button></li>
</ul>
</li>
<li>
<h3>工具</h3>
<hr />
<ul id="means">
<li><img src="" alt="" /></li>
<li><img src="" alt="" /></li>
<li><img src="" alt="" /></li>
<li><img src="" alt="" /></li>
<li><img src="" alt="" /></li>
<li><img src="" alt="" /></li>
</ul>
</li>
<li>
<h3>形状</h3>
<hr />
<ul id="shape">
<li><img src="" alt="" /></li>
<li><img src="" alt="" /></li>
<li><img src="" alt="" /></li>
<li><img src="" alt="" /></li>
<li><img src="" alt="" /></li>
<li><img src="" alt="" /></li>
</ul>
</li>
<li>
<h3>线宽</h3>
<hr />
<ul id="size">
<li><img src="" alt="" /></li>
<li><img src="" alt="" /></li>
<li><img src="" alt="" /></li>
<li><img src="" alt="" /></li>
</ul>
</li>
<li>
<h3>颜色</h3>
<hr />
<ul id="color">
<li id="red"></li>
<li id="green"></li>
<li id="blue"></li>
<li id="yellow"></li>
<li id="white"></li>
<li id="black"></li>
<li id="pink"></li>
<li id="purple"></li>
<li id="cyan"></li>
<li id="orange"></li>
</ul>
</li>
</ul>
</section>
<footer id="footer">
<small>版权所有,盗版必究@</small>
</footer>
<script type="text/javascript">
</script>
</body>
</html>
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 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 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 actions=[Brush,Eraser,Paint,Straw,Text,Magnifier,Line,Arc,Rect,Poly,Arcfill,Rectfill];
//把4组线宽对象放到一个数组中
var width=[Line_1,Line_3,Line_5,Line_8];
//把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++){
if(i==num){
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";
}
}
}
}
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.οnmοuseοut=function(){
flag=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.cleatRect();
cxt.clearRect(eraserX-cxt.lineWidth,eraserY-cxt.lineWidth,-cxt.lineWidth*2,-cxt.lineWidth*2);
eraserFlag=1;
}
canvas.οnmοusemοve=function(){
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);
}
}
canvas.οnmοuseup=function(){
eraserFlag=0;
}
canvas.οnmοuseοut=function(){
eraserFlag=0;
}
}
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);
//alert(obj.data);
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;
var usetVal=window.prompt("请在这里输入文字","");
if(usetVal!=null){
cxt.fillText(usetVal,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");
var scaleW=880*scale/100;
var scaleH=400*scale/100;
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画布的距离(以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();
}
}
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;
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;
}
var rectY=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;
endX=evt.pageX-this.offsetLeft;
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;
}
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.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);
cxt.lineTo(polyX,endY-tmpB);
cxt.closePath();
cxt.stroke();
}
canvas.οnmοusemοve=null;
canvas.οnmοuseοut=null;
}
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;
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;
}
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;
endX=evt.pageX-this.offsetLeft;
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(width,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;
}