兄弟连HTML5——10.11.12.13.14.15canvas实例3——在线画图工具——功能介绍和页面布局

来源：互联网发布：微信不能连接网络编辑：程序博客网时间：2024/05/16 00:48

本章概要
   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 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 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");

//把12个工具和形状标签放到一个数组中
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";
    }
  }
}
}

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.onmouseout=function(){
  flag=0;
}
}

//设置线宽函数
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;
}

0 0