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

index.html

     
     
     
      HTML5在线画图工具
     
     
      
      
  
       
    
图像
    
        
    
        
      
         
保存图片
      
         
清空画板
    
        
  
  
       
   
工具
      
        
    
        
      
         
      
         
      
         
      
         
      
         
      
         
          
        
  
  
       
   
形状
      
        
        
        
      
         
      
         
      
         
      
         
      
         
      
         
          
        
  
  
       
   
线宽
      
        
    
        
      
         
      
         
      
         
      
         
    
        
  
  
       
   
颜色
      
        
    
        
      
         
      
         
      
         
      
         
      
         
      
         
      
         
      
         
      
         
      
         
    
        
  
      
          
      
           您的浏览器不支持标签，无法看到画布    
      
     
     
 -----------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];

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

}

}

}

}

//设置初始值

drawBrush(0);

//默认设置颜色

setColor(Colorred,0);

//默认设置线宽

setLine(0);

//列出所有的按钮函数

var startX = 0;

var startY = 0;

var strawX = 0;

var strawY = 0;

function drawBrush(num){ //画笔函数

setStatus(actions,num,1);

//画图步骤

//设置开始点 moveTO---鼠标按下

//绘制不同的点 lineTO --鼠标移动

//设置结束点 stroke -- 鼠标弹起

//鼠标按下

var flag = 0;

canvas.onmousedown = function(evt){

//获取当前鼠标相对于画布起起始点（0,0）的距离

//获取鼠标相对于页面顶端的距离

//整合w3c和IE

evt = window.event||evt;

//pageX pageY 鼠标相对页面的横纵坐标

// alert(evt.pageX+'----'+evt.pageY);

//获取当前对象相对于页面顶端的距离

//this.offsetLeft+'---'+this.offsetTop;

//鼠标相对0，0点的就是鼠标相对画布的距离

startX = evt.pageX - this.offsetLeft;

startY = evt.pageY - this.offsetTop;

//alert(startX);

//alert(startY);

//判断一下鼠标是否按下

flag = 1;

cxt.beginPath();

cxt.moveTo(startX,startY);

}

//鼠标移动

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 drawPaint(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();

cxt.fillRect(0,0,880,400);

}

//鼠标移动

canvas.onmousemove = function(){

}

//鼠标弹起

canvas.onmouseup = function(){

flag = 0;

cxt.closePath();

}

//鼠标移除

canvas.onmouseout = function(){

flag = 0;

}

}

//吸管函数

function drawStraw(num){

setStatus(actions,num,1);

var flag = 0;

canvas.onmousedown = function(evt){

evt = window.event||evt;

var strawX = evt.pageX - this.offsetLeft;

var strawY = evt.pageY - this.offsetTop;

flag = 1;

cxt.beginPath();

var obj = cxt.getImageData(strawX,strawY,1,1);

var color = 'rgb('+obj.data[0]+','+obj.data[1]+','+obj.data[2]+')';

cxt.strokeStyle = color;

cxt.fillStyle = color;

//alert(color) ;

}

//鼠标移动

canvas.onmousemove = function(){

}

//鼠标弹起

canvas.onmouseup = function(){

flag = 0;

cxt.closePath();

}

//鼠标移除

canvas.onmouseout = function(){

flag = 0;

}

}

//文本函数

function drawtext(num){

setStatus(actions,num,1);

}

//放大镜函数

function drawMagnifier(num){

setStatus(actions,num,1);

}

var arcX = 0;

var arcY = 0;

var rectX = 0;

var rectY = 0;

var polyX = 0;

var polyY = 0;

function drawLine(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();

cxt.moveTo(startX,startY);

}

//鼠标弹起

canvas.onmouseup = 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();

}

flag = 0;

cxt.closePath();

}

//鼠标移除

canvas.onmouseout = function(){

flag = 0;

}

}

function drawArc(num){ //圆圈函数

setStatus(actions,num,1);

//画图步骤

var flag = 0;

canvas.onmousedown = function(evt){

evt = window.event||evt;

arcX = evt.pageX - this.offsetLeft;

arcY = evt.pageY - this.offsetTop;

flag = 1;

cxt.beginPath();

//cxt.moveTo(startX,startY);

}

//鼠标弹起

canvas.onmouseup = function(evt){

evt = window.event||evt;

var endX = evt.pageX - this.offsetLeft;

var endY = evt.pageY - this.offsetTop;

var arc_endX = endX - arcX ;

var arc_endY = endY - arcY ;

var c = Math.sqrt(arc_endX*arc_endX + arc_endY*arc_endY);

if(flag){

cxt.arc(arcX,arcY,c,0,360,false);

//cxt.lineTo(endX,endY);

cxt.stroke();

}

flag = 0;

cxt.closePath();

}

//鼠标移除

canvas.onmouseout = function(){

flag = 0;

}

}

function drawRect(num){ //方框函数

setStatus(actions,num,1);

//画图步骤

var flag = 0;

canvas.onmousedown = function(evt){

evt = window.event||evt;

rectX = evt.pageX - this.offsetLeft;

rectY = evt.pageY - this.offsetTop;

flag = 1;

cxt.beginPath();

}

//鼠标弹起

canvas.onmouseup = function(evt){

evt = window.event||evt;

var endX = evt.pageX - this.offsetLeft;

var endY = evt.pageY - this.offsetTop;

var rect_endX = endX - rectX ;

var rect_endY = endY - rectY ;

if(flag){

cxt.strokeRect(rectX,rectY,rect_endX,rect_endY);

cxt.fill(); }

flag = 0;

cxt.closePath();

}

//鼠标移除

canvas.onmouseout = function(){

flag = 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);

//计算最上面顶点坐标

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

//画图步骤

var flag = 0;

canvas.onmousedown = function(evt){

evt = window.event||evt;

arcX = evt.pageX - this.offsetLeft;

arcY = evt.pageY - this.offsetTop;

flag = 1;

cxt.beginPath();

}

//鼠标弹起

canvas.onmouseup = function(evt){

evt = window.event||evt;

var endX = evt.pageX - this.offsetLeft;

var endY = evt.pageY - this.offsetTop;

var arc_endX = endX - arcX ;

var arc_endY = endY - arcY ;

var c = Math.sqrt(arc_endX*arc_endX + arc_endY*arc_endY);

if(flag){

cxt.arc(arcX,arcY,c,0,360,false);

cxt.fill();

}

flag = 0;

cxt.closePath();

}

//鼠标移除

canvas.onmouseout = function(){

flag = 0;

}

}

function drawRectfill(num){ //填充矩形函数

setStatus(actions,num,1);

//画图步骤

var flag = 0;

canvas.onmousedown = function(evt){

evt = window.event||evt;

rectX = evt.pageX - this.offsetLeft;

rectY = evt.pageY - this.offsetTop;

flag = 1;

cxt.beginPath();

}

//鼠标弹起

canvas.onmouseup = function(evt){

evt = window.event||evt;

var endX = evt.pageX - this.offsetLeft;

var endY = evt.pageY - this.offsetTop;

var rect_endX = endX - rectX ;

var rect_endY = endY - rectY ;

if(flag){

cxt.fillRect(rectX,rectY,rect_endX,rect_endY);

cxt.fill(); }

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 {

width:900px;

height:80px;

font-size:40px;

margin:0 auto;

text-align:center;

line-height:80px;

background:blue;

}

h3 {

}

#content {

width:880px;

height:550px;

background:gray;

margin:0 auto;

text-align:center;

padding:10px;

}

#tool { height:150px;}

#tool li {

float:left;

width: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;

width: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;

width:20px;

}

#size { padding:10px; padding-left:25px;}

#size li{height:20px; width:120px;border:1px solid #ccc;}

#size li:hover {background:gray;border:1px solid #fff;}

#color{padding:25px;}

#color li{ width: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 {

width:900px;

height:30px;

margin:0 auto;

text-align:center;

background:blue;

}