自己封装的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; // 文字欄位初始 Yfor(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;}
?
