自己封装的HTML5工具类

//画箭头
var proc={  
        /** 
         * 接收canvas对象，并在此上画箭头（箭头起止点已经设置） 
         * @param context 
         * @param flag  是否是双箭头
         */  
        paint:function(context,flag){paint(this,context,flag);},  
        /** 
         * 设置箭头起止点 
         * @param sp起点 
         * @param ep终点 
         * @param st强度 
         */  
        set:function(sp,ep,st){init(this,sp,ep,st);},  
        /** 
         * 设置箭头外观 
         * @param args 
         */  
        setPara:function(args){  
            this.size=args.arrow_size;//箭头大小  
            this.sharp=args.arrow_sharp;//箭头锐钝  
        }  
    };  
      
    var init=function(a,sp,ep,st){  
        a.sp=sp;//起点  
        a.ep=ep;//终点  
        a.st=st;//强度  
    };  
    var paint=function(a,context,flag){  
        var sp=a.sp;  
        var ep=a.ep;  
        if (context==undefined)  
            return;  
        //画箭头主线  
        context.beginPath();  
        context.moveTo(sp.x,sp.y);  
        context.lineTo(ep.x,ep.y);  
        //画箭头头部  
        var h=_calcH(a,sp,ep,context);  
        context.moveTo(ep.x,ep.y);  
        context.lineTo(h.h1.x,h.h1.y);  
        context.moveTo(ep.x,ep.y);  
        context.lineTo(h.h2.x,h.h2.y);  
        context.stroke();  
        if(flag){ //双箭头
        	//另一侧的箭头wlt添加
        	var h=_calcH(a,ep,sp,context);  
        	context.moveTo(sp.x,sp.y);  
        	context.lineTo(h.h1.x,h.h1.y);  
        	context.moveTo(sp.x,ep.y);  
        	context.lineTo(h.h2.x,h.h2.y);  
        	context.stroke();  
        }
        
    };  
    //计算头部坐标  
    var _calcH=function(a,sp,ep,context){  
        var theta=Math.atan((ep.x-sp.x)/(ep.y-sp.y));  
        var cep=_scrollXOY(ep,-theta);  
        var csp=_scrollXOY(sp,-theta);  
        var ch1={x:0,y:0};  
        var ch2={x:0,y:0};  
        var l=cep.y-csp.y;  
        ch1.x=cep.x+l*(a.sharp||0.025);  
        ch1.y=cep.y-l*(a.size||0.05);  
        ch2.x=cep.x-l*(a.sharp||0.025);  
        ch2.y=cep.y-l*(a.size||0.05);  
        var h1=_scrollXOY(ch1,theta);  
        var h2=_scrollXOY(ch2,theta);  
        return {  
            h1:h1,  
            h2:h2  
                };  
    };  
    //旋转坐标  
    var _scrollXOY=function(p,theta){  
        return {  
            x:p.x*Math.cos(theta)+p.y*Math.sin(theta),  
            y:p.y*Math.cos(theta)-p.x*Math.sin(theta)  
        };  
    };  

var Html5Util = function(a){
	
}
/**
* @param x 圆心x
* @param y 圆心y
* @param r
* @param color 半径
* @param ctx 画笔
*/
Html5Util.prototype.round = function(x,y,r,color,ctx){
	ctx.beginPath();
	//圆形3
    //arc(圆心x,圆心y,半径,开始的角度,结束的角度,是否逆时针)
	ctx.arc(x,y,r,0,Math.PI*2);
	ctx.fillStyle=color;//填充的样式
	ctx.strokeStyle=color;//边框的样式
	ctx.closePath();
	ctx.fill();//填充
	ctx.stroke();
	
}
/**
 * 画虚线
 * @param x1
 * @param y1
 * @param x2
 * @param y2
 * @param color
 * @param ctx
 */
Html5Util.prototype.dashedLine  = function(x1, y1, x2, y2,color,ctx){
	var step = 5;
	ctx.strokeStyle = color;//线条样子
	ctx.beginPath();
	ctx.moveTo(x1, y1);

	if(x1==x2){//y轴的虚线 
		while(y1<y2){
			y1=(y1+step<=y2?y1+step:y2);
			ctx.lineTo(x1,y1); 
			y1=(y1+step<=y2?y1+step:y2);
			ctx.moveTo(x1, y1);
		}
	}else{//x轴的虚线
		while(x1<x2){
			x1=(x1+step<=x2?x1+step:x2);
			ctx.moveTo(x1, y1);
			x1=(x1+step<=x2?x1+step:x2);
			ctx.lineTo(x1,y1); 
		}
		
	}
	ctx.closePath();
	ctx.fill();
	ctx.stroke();//描边
	
	
}
/**
 * 画虚线
 * @param x1
 * @param y1
 * @param x2
 * @param y2
 * @param color
 * @param ctx
 */
Html5Util.prototype.dashedLine2  = function(sp,ep,color,ctx){
	var x1 =sp.x;
	var y1 =sp.y;
	var x2 =ep.x;
	var y2 =ep.y;
	var step = 5;
	ctx.strokeStyle = color;//线条样子
	ctx.beginPath();
	ctx.moveTo(x1, y1);
	
	if(x1==x2){//y轴的虚线 
		while(y1<y2){
			y1=(y1+step<=y2?y1+step:y2);
			ctx.lineTo(x1,y1); 
			y1=(y1+step<=y2?y1+step:y2);
			ctx.moveTo(x1, y1);
		}
	}else{//x轴的虚线
		while(x1<x2){
			x1=(x1+step<=x2?x1+step:x2);
			ctx.moveTo(x1, y1);
			x1=(x1+step<=x2?x1+step:x2);
			ctx.lineTo(x1,y1); 
		}
		
	}
	ctx.closePath();
	ctx.fill();
	ctx.stroke();//描边
	
	
}
/**
 * 
 * @param x1 矩形左上角x坐标
 * @param y1 矩形左上角y坐标
 * @param x2 矩形右下角x坐标
 * @param y2 矩形右下角y坐标
 * @param color
 * @param ctx
 */
Html5Util.prototype.dashedLineRectangle  = function(x1, y1, x2, y2,color,ctx){
	var obj = this;
	obj.dashedLine(x1, y1, x2, y1,color,ctx);//矩形上边
	obj.dashedLine(x1, y2, x2, y2,color,ctx);//矩形下边
	obj.dashedLine(x1, y1, x1, y2,color,ctx);//矩形左边
	obj.dashedLine(x2, y1, x2, y2,color,ctx);//矩形右边
}
Html5Util.prototype.text  = function(){
	guideText.texts = ["第一行文字","第二行文字","第三行文字"];
	var padding = 60; // 行距
	var adjustY = 150; // 文字欄位初始 Y
	for(var i=0;i<guideText.texts.length;i++)
	{
	    context2D.font = "bold 24pt 微軟正黑體";
	    context2D.textAlign = "center";
	    context2D.fillText(guideText.texts[i],CANVAS_WIDTH / 2, adjustY + padding*i);
	}
}
/**
 * 
 * @param e
 * @param canvas
 * @returns {x，y轴坐标}
 */
Html5Util.prototype.transEventMousePos = function(e,canvas) {
	var x = e.clientX?e.clientX:e.x;
	var y = e.clientY?e.clientY:e.y;
	
	var box = canvas.getBoundingClientRect();
	
	return {
		x:(x-box.left)*canvas.width/box.width,
		y:(y-box.top)*canvas.height/box.height
	};
};
Html5Util.prototype.isInRound = function(pos,round,r) {
	if(Math.abs(round.x-pos.x)<=r && Math.abs(round.y-pos.y)<=r) {
		return true;
	}
		return false;
}

 工具类的使用

<%@page contentType="text/html;charset=utf-8" %>
<%@page import="java.util.Map" %>
<%@page import="java.util.Iterator" %>
<% 
	String path= request.getContextPath();
	String layout_id = request.getParameter("id");
	if(layout_id == null) {
		layout_id = "";
	}
	String mode=request.getParameter("mode");
	if(mode == null) {
		mode = "";
	}
	
	Map paramMap = request.getParameterMap();
	
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>html5</title> 
<link rel="stylesheet" type="text/css" href="<%=path%>/jquery/css/jquery-ui-1.10.3.custom.css" />
<link rel="stylesheet" type="text/css" href="<%=path%>/css/layout.css" />	

<script type="text/javascript" src="<%=path%>/jquery/jquery-1.9.1.js"></script>
<script type="text/javascript" src="<%=path%>/jquery/jquery-ui-1.10.3.custom.min.js"></script>
<script type="text/javascript" src="<%=path%>/javaScript/html5.js"></script>
<style type="text/css">
	div{
		
		/* 
		width: 1080px;
		height: 380px; 
		*/
		width: 1055px;
		height: 308px; 
		border-color: #E60749;
		border: 1px; 
		border-style:solid; 
	}
</style>
<script type="text/javascript">
	$(document).ready(function(){
		test();
	});

	function test(){
		var html5Obj = new Html5Util(1);
		var r = 12;
		var div = $('#div1');
		var width = div.width();
		var height = div.height();
	
		
		var canvas=$('#Canvas1').get(0);//画布
		canvas.width= width
		canvas.height = height;
		var ctx = canvas.getContext('2d'); // 画笔
		
		var simpleColor = "#00B050"; //普通圆形的颜色 绿色
		var greyColor = "#D9D9D9"; //灰色
		var redColor = "#FF0000"; //红色
		var blueColor = "#497DBB"; //蓝色  虚线时用
		var blackColor = "#313131"; //黑色  虚线时用
		//var procColor = "#000000"; //黑色  箭头时用
		// 画圆 6个 竖向的圆
		var roundx = width*0.15;
		var roundy= height*0.1
		var step = Math.ceil(height/7); 
		html5Obj.round(roundx,step,r,simpleColor,ctx); //实体厅
		html5Obj.round(roundx,step*2,r,simpleColor,ctx);//网厅'
		html5Obj.round(roundx,step*3,r,simpleColor,ctx);//短厅
		html5Obj.round(roundx,step*4,r,simpleColor,ctx);//WAP
		html5Obj.round(roundx,step*5,r,simpleColor,ctx);//IVR
		html5Obj.round(roundx,step*6,r,simpleColor,ctx);//'其他'

		//写字
		//圆形旁边的文字
		var fontx = width*0.03;
		var fontStep = step+1;
		ctx.fillStyle="#000000";
		ctx.fillText('实体厅',fontx,step);//填充文字
		ctx.fillText('网厅',fontx,step*2);//填充文字
		ctx.fillText('短厅',fontx,step*3);
		ctx.fillText('WAP',fontx,step*4);
		ctx.fillText('IVR',fontx,step*5);
		ctx.fillText('其他',fontx,step*6);
		
		//渠道接口日志
		ctx.fillText('渠道接口日志',10,15);//填充文字
		
		//圆形旁边的竖线
		ctx.beginPath();
		ctx.moveTo(roundx+r,step);
		ctx.lineTo(roundx+r,step*6);
		ctx.lineWidth=3;
		ctx.strokeStyle = "#4D4D4D";//线条样子
		ctx.closePath();
		ctx.stroke();//描边


		

		//横向大箭头
		//ctx.moveTo(roundx+r,step*4);
		ctx.beginPath();
		ctx.strokeStyle="black";//填充的样式
		ctx.lineWidth=3;
		var y_pro_max = width-2*r;
		proc.set({x:roundx+r,y:step*4-r},{x:y_pro_max,y:step*4-r});
		proc.setPara({  
		    arrow_size:0.020,  
		    arrow_sharp:0.010  
		})  
		proc.paint(ctx);   
		ctx.closePath();

		
		//横向的圆 
		var step2 = Math.ceil((width-roundx-r)/8); 
		var firstX=roundx+step2;
		var firstY=step*4-r;
		html5Obj.round(firstX,firstY,r,simpleColor,ctx);//缴费记录
		html5Obj.round(firstX+step2,firstY,r,redColor,ctx);
		html5Obj.round(firstX+2*step2,firstY,r,simpleColor,ctx);
		html5Obj.round(firstX+3*step2,firstY,r,simpleColor,ctx);
		html5Obj.round(firstX+4*step2,firstY,r,simpleColor,ctx);
		html5Obj.round(firstX+5*step2,firstY,r,simpleColor,ctx);
		html5Obj.round(firstX+6*step2,firstY,r,greyColor,ctx);
		//圆下的文字
		var y_text_des =firstY+2*r;
		ctx.fillStyle="#000000";
		ctx.textAlign="center";  
		ctx.textBaseline="top";  //垂直的基线
		ctx.fillText('缴费记录表',firstX,y_text_des);//填充文字
		ctx.fillText('账本流水变更表',firstX+step2,y_text_des);//填充文字
		ctx.fillText('信控工单表',firstX+2*step2,y_text_des);//填充文字
		ctx.fillText('CRM账务开通表',firstX+3*step2,y_text_des);//填充文字
		ctx.fillText('服务开通订单表',firstX+4*step2,y_text_des);//填充文字
		ctx.fillText('服务开通工单表',firstX+5*step2,y_text_des);//填充文字
		ctx.fillText('指令执行工单表',firstX+6*step2,y_text_des);//填充文字
		
		
		//三个圆的
		var y_cationRound = step+r;
		html5Obj.round(firstX+step2,y_cationRound,r,redColor,ctx);
		html5Obj.round(firstX+3*step2,y_cationRound,r,simpleColor,ctx);
		html5Obj.round(firstX+5*step2,y_cationRound,r,greyColor,ctx);

		//三个圆的图例旁边的说明文字
		var y_text =y_cationRound;
		ctx.fillStyle="#000000";
		ctx.textAlign="left";  
		ctx.textBaseline="middle"; 
		ctx.fillText('超阀值',firstX+step2+r+3,y_text);//填充文字
		ctx.fillText('正常',firstX+3*step2+r+3,y_text);//填充文字
		ctx.fillText('无此环接',firstX+5*step2+r+3,y_text);//填充文字

		
		
		//画虚线
		//第一个虚线框 
		//x：网厅圆心+(step2/2)  y:网厅圆心
		ctx.lineWidth=2;
		var x1_dashedLine1 = roundx+(step2/2);
		var y1_dashedLine1 = 2*step;
		var x2_dashedLine1 = firstX+2*step2 +(step2/2)-5;
		var y2_dashedLine1 = 5*step+2*r;
     	html5Obj.dashedLineRectangle(x1_dashedLine1,y1_dashedLine1,x2_dashedLine1,y2_dashedLine1,simpleColor,ctx);//横线
     	//第二个虚线框  蓝色
		var x1_dashedLine2 = firstX+2*step2 +(step2/2)+5;
		var y1_dashedLine2 = y1_dashedLine1;
		var x2_dashedLine2 = firstX+3*step2 +(step2/2)-5;
		var y2_dashedLine2 = y2_dashedLine1;
     	html5Obj.dashedLineRectangle(x1_dashedLine2,y1_dashedLine2,x2_dashedLine2,y2_dashedLine2,blueColor,ctx);//横线
     	//第三个虚线框  红色
		var x1_dashedLine3 = firstX+3*step2 +(step2/2)+5;
		var y1_dashedLine3 = y1_dashedLine1;
		var x2_dashedLine3 = width-r;
		var y2_dashedLine3 = y2_dashedLine1;
     	html5Obj.dashedLineRectangle(x1_dashedLine3,y1_dashedLine3,x2_dashedLine3,y2_dashedLine3,redColor,ctx);//横线


     	//三个虚线框的说明文字
		var x1_text_dashedLine =x1_dashedLine1+(x2_dashedLine1-x1_dashedLine1)/2;//一个汉字大概默认为12px，减去3个汉字
		var y1_text_dashedLine =5*step;
		var x2_text_dashedLine =x1_dashedLine2+(x2_dashedLine2-x1_dashedLine2)/2;//一个汉字大概默认为12px，减去3个汉字
		var x3_text_dashedLine =x1_dashedLine3+(x2_dashedLine3-x1_dashedLine3)/2;//一个汉字大概默认为12px，减去3个汉字
		ctx.fillStyle="#000000";
		ctx.textAlign="center";    
		ctx.fillText('财务处理环节',x1_text_dashedLine,y1_text_dashedLine);//填充文字
		ctx.fillText('营业处理环节',x2_text_dashedLine,y1_text_dashedLine);//填充文字
	 	ctx.fillText('开机处理环接',x3_text_dashedLine,y1_text_dashedLine);//填充文字
		
		//一段段的双向箭头
		//第一个双向箭头
		ctx.strokeStyle="#4D4D4D";//填充的样式
		ctx.lineWidth=2;
		var x1_proc1 = roundx+r;
		var y1_proc1 = step*3-r-2;
		var x2_proc = firstX+step2
		proc.set({x:roundx+r,y:y1_proc1},{x:firstX,y:y1_proc1});
		proc.setPara({arrow_size:0.08, arrow_sharp:0.05 })  
		proc.paint(ctx,true); 

		//第二个双向箭头
		proc.set({x:firstX,y:y1_proc1},{x:firstX+step2,y:y1_proc1});
		proc.setPara({arrow_size:0.08, arrow_sharp:0.05 })  
		proc.paint(ctx,true); 
		//第三个双向箭头
		proc.set({x:firstX+step2,y:y1_proc1},{x:firstX+2*step2,y:y1_proc1});
		proc.setPara({arrow_size:0.08, arrow_sharp:0.05 })  
		proc.paint(ctx,true); 
		//第四个双向箭头
		proc.set({x:firstX+2*step2,y:y1_proc1},{x:firstX+3*step2,y:y1_proc1});
		proc.setPara({arrow_size:0.08, arrow_sharp:0.05 })  
		proc.paint(ctx,true); 
		//第五个箭头
		proc.set({x:firstX+3*step2,y:y1_proc1},{x:firstX+4*step2,y:y1_proc1});
		proc.setPara({arrow_size:0.08, arrow_sharp:0.05 })  
		proc.paint(ctx,true); 
		//第六个双向箭头
		proc.set({x:firstX+4*step2,y:y1_proc1},{x:firstX+5*step2,y:y1_proc1});
		proc.setPara({arrow_size:0.08, arrow_sharp:0.05 })  
		proc.paint(ctx,true); 
		//第7个箭头
		proc.set({x:firstX+5*step2,y:y1_proc1},{x:firstX+6*step2,y:y1_proc1});
		proc.setPara({arrow_size:0.08, arrow_sharp:0.05 })  
		proc.paint(ctx,true); 


		//箭头下面的虚线
		var y_d = firstY-r;
		html5Obj.dashedLine2({x:firstX,y:y1_proc1},{x:firstX,y:y_d},blackColor,ctx);
		html5Obj.dashedLine2({x:firstX+step2,y:y1_proc1},{x:firstX+step2,y:y_d},blackColor,ctx);
		html5Obj.dashedLine2({x:firstX+2*step2,y:y1_proc1},{x:firstX+2*step2,y:y_d},blackColor,ctx);
		html5Obj.dashedLine2({x:firstX+3*step2,y:y1_proc1},{x:firstX+3*step2,y:y_d},blackColor,ctx);
		html5Obj.dashedLine2({x:firstX+4*step2,y:y1_proc1},{x:firstX+4*step2,y:y_d},blackColor,ctx);
		html5Obj.dashedLine2({x:firstX+5*step2,y:y1_proc1},{x:firstX+5*step2,y:y_d},blackColor,ctx);
		html5Obj.dashedLine2({x:firstX+6*step2,y:y1_proc1},{x:firstX+6*step2,y:y_d},blackColor,ctx);
     	
     	//html5Obj.dashedLineRectangle(500,300,700,500,"#E60749",ctx);
     //	html5Obj.dashedLine(125,129,125,192,"#2A00FF",ctx);
	}
	
</script>

</head>

<body>
<div id="div1">
	<canvas id="Canvas1"></canvas>
</div>
<input type="button" value="html5" onclick=""/>
			<marquee direction=left></marquee>	
</body>
</html>