H TML5 之（5）一个在线画图板

这里加入了点难度了，增加了对HTML很多时间的把握，对象的把握

index.html

<!DOCTYPE HTML>
<html>
<head>
<title>Paint</title>
<meta charset="gbk" />
<link  type="text/css" href="canvas.css" rel="stylesheet"/>
</head>
<body>
<header id="header">HTML5在线画图工具</header>
<section id="content">
<!--工作区域-->
<ul id="tool">
  <li>
    <h3>图像</h3>
    <hr/>
    <ul id="image">
      <li><button id="saveimg">保存图片</button></li>
      <li><button id="clearimg">清空画板</button></li>
    </ul>
  </li>
  <li> 
  <h3>工具</h3>
      <hr/>
    <ul id="means">
      <li id="means_brush" onclick="drawBrush(0)"><img src="images/Brush.png"/></li>
      <li id="means_eraser" onclick="drawEraser(1)"><img src="images/Eraser.png"/></li>
      <li id="means_paint" onclick="drawPaint(2)"><img src="images/Paint.png"/></li>
      <li id="means_straw" onclick="drawStraw(3)"><img src="images/Straw.png"/></li>
      <li id="means_text" onclick="drawtext(4)"><img src="images/text.png"/></li>
      <li id="means_magnifier" onclick="drawMagnifier(5)"><img src="images/Magnifier.png"/></li>      
    </ul>
  </li>
  <li> 
  <h3>形状</h3>
      <hr/>
        <ul id="shape">
      <li id="shape_line" onclick="drawLine(6)" ><img src="images/line.png"/></li>
      <li id="shape_arc" onclick="drawArc(7)" ><img src="images/arc.png"/></li>
      <li id="shape_rect" onclick="drawRect(8)"><img src="images/rect.png"/></li>
      <li id="shape_poly" onclick="drawPoly(9)"><img src="images/poly.png"/></li>
      <li id="shape_arcfill" onclick="drawArcfill(10)"><img src="images/arcfill.png"/></li>
      <li id="shape_rectfill" onclick="drawRectfill(11)" ><img src="images/rectfill.png"/></li>      
    </ul>
  </li>
  <li> 
  <h3>线宽</h3>
      <hr/>
    <ul id="size">
      <li id="size_line1px" onclick="setLine(0)"><img src="images/line1px.png"/></li>
      <li id="size_line3px" onclick="setLine(1)"><img src="images/line3px.png"/></li>
      <li id="size_line5px" onclick="setLine(2)"><img src="images/line5px.png"/></li>
      <li id="size_line8px" onclick="setLine(3)"><img src="images/line8px.png"/></li>
    </ul>
  </li>
  <li> 
  <h3>颜色</h3>
      <hr/>
    <ul id="color" >
      <li id="red" onclick="setColor(this,0)"></li>
      <li id="green" onclick="setColor(this,1)"></li>
      <li id="blue" onclick="setColor(this,2)"></li>
      <li id="yellow"onclick="setColor(this,3)" ></li>
      <li id="white" onclick="setColor(this,4)" ></li>
      <li id="black" onclick="setColor(this,5)" ></li>
      <li id="pink" onclick="setColor(this,6)" ></li>
      <li id="purple" onclick="setColor(this,7)" ></li>
      <li id="cyan" onclick="setColor(this,8)" ></li>
      <li id="orange" onclick="setColor(this,9)" ></li>
    </ul>
  </li>
</ul>
<!--绘图区域-->
    <canvas id="canvas" width="880" height="400" >
    您的浏览器不支持标签，无法看到画布
    </canvas>
</section>
<footer id="footer"></footer>


</body>
<script src="canvas.js"> </script>
</html>
-----------canvas.js 代码段

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");

//将12个放在一个组中
var actions= [Brush,Eraser,Paint,Straw,text,Magnifier,Line,Arc,Rect,Poly,Arcfill,Rectfill];

//获取线宽按钮标签
var line1px = document.getElementById("size_line1px");
var line3px = document.getElementById("size_line3px");
var line5px = document.getElementById("size_line5px");
var line8px = document.getElementById("size_line8px");
//把线宽放在一个数组中，
var Width = [line1px,line3px,line5px,line8px];

//获取颜色按钮
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 Color = [Colorred,Colorgreen,Colorblue,Coloryellow,Colorwhite,Colorblack,Colorpink,Colorpurple,Colorcyan,Colororange];

}
//鼠标移动
canvas.onmousemove = function(){
evt = window.event||evt;
var endX = evt.pageX - this.offsetLeft;
var endY = evt.pageY - this.offsetTop;
//alert(endX+'--'+endY);
if(flag){
cxt.lineTo(endX,endY);
cxt.stroke();
}

}
//鼠标弹起
canvas.onmouseup = function(){
flag = 0;
cxt.closePath();
}
//鼠标移除
canvas.onmouseout = function(){
flag = 0;
}
}

function drawEraser(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;
flag = 1;
cxt.beginPath();
if(flag){
cxt.clearRect(startX-cxt.lineWidth,startY-cxt.lineWidth,cxt.lineWidth*2,cxt.lineWidth*2);
}
}
//鼠标移动
canvas.onmousemove = function(){
evt = window.event||evt;
var endX = evt.pageX - this.offsetLeft;
var endY = evt.pageY - this.offsetTop;
if(flag){
cxt.clearRect(endX-cxt.lineWidth,endY-cxt.lineWidth,cxt.lineWidth*2,cxt.lineWidth*2);

}
}
//鼠标弹起
canvas.onmouseup = function(){
flag = 0;
cxt.closePath();
}
//鼠标移除
canvas.onmouseout = function(){
flag = 0;
}
}

function setLine(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(Color,num,0);
cxt.fillStyle = obj.id;
cxt.strokeStyle = obj.id;
}

------canvas.css CSS 段

* {
padding:0;
margin:0;
list-style:none;
}
body {
background:#ABCDEF;
}
#header {
900px;
height:80px;
font-size:40px;
margin:0 auto;
text-align:center;
line-height:80px;
background:blue;

}
h3 {

}
#content {
880px;
height:550px;
background:gray;
margin:0 auto;
text-align:center;
padding:10px;
}
#tool { height:150px;}
#tool li {
float:left;
175px;
height:130px;
background:#ccc;
border-right:1px solid red;
}
#image {
text-align:left;
}
#image li {
height:25px;
list-style:square inside;
}
#image li button{
background:gray;
border:1px solid black;
}
#image li button:hover {background:gray;border:1px solid #fff;}
#means,#shape {
padding:20px;
}
#means li,#shape li{
height:20px;
40px;
border:1px solid #000;
margin-bottom:2px;
}
#means li:hover,#shape li:hover {background:gray;border:1px solid #fff;}

#means img,#shape img {
height:20px;
20px;
}
#size { padding:10px; padding-left:25px;}
#size li{height:20px; 120px;border:1px solid #ccc;}
#size li:hover {background:gray;border:1px solid #fff;}
#color{padding:25px;}
#color li{ 20px; height:20px;margin-bottom:10px; margin-left:3px;border:1px solid #000;}
#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;}
#color li:hover {background:gray;border:1px solid #fff;}
#canvas {background:#fff;}
#canvas:hover { cursor:crosshair;}
#footer {
900px;
height:30px;
margin:0 auto;
text-align:center;
background:blue;
}

H TML5 之 （5） 一个在线画图板

H TML5 之（5）一个在线画图板