bigengineer.js - 金海龙HTML5 Canvas 作图函数库 2012版

/*

名称：金海龙HTML5
Canvas 作图函数库 2012版

版本：2.0

作者：金海龙(高级软件工程师)

博客：http://htmlcanvas.webgarden.com
Google搜索：HTML
Canvas 金海龙

类型：Web应用/绘图/源代码

开发平台：WinXP+Google浏览器

功能：为个人开发者提供简单的作图函数，

凡是支持HTML5的浏览器，都能使用这些函数。

*/

function ABLen(A,B)

{

//功能：计算A、B两点之间的距离。

var i;

i=Math.pow((B[0]-A[0]),2)+Math.pow((B[1]-A[1]),2);

i=Math.floor(Math.sqrt(i));

return i;

}

function DrawP(Canvas,P)

{

//在点P处画一个点

with (Canvas)

{

moveTo(P[0],P[1]);

lineTo(P[0]+1,P[1]+1);

}

}

function DrawLine(Canvas,A,B)

{

//画一条线段,“A、B”是这条线段的端点

with (Canvas)

{

moveTo(A[0],A[1]);

lineTo(B[0],B[1]);

}

}

function GetSmallest(A,B)

{

var i,co,i1,i2;

var R=new Array(2);

//返回P中X最小和Y最小的数，然后组成新的点返回

R[0]=A[0];

R[1]=A[1];

if (B[0]<R[0])

{

i1=B[0];

}

else

{

i1=R[0];

}

if (B[1]<R[1])

{

i2=B[1];

}

else

{

i2=R[1];

}

R[0]=i1;

R[1]=i2;

return(R);

}

function GetBiggest(A,B)

{

var i,co,i1,i2;

var R=new Array(2);

//返回P中X最小和Y最小的数，然后组成新的点返回

R[0]=A[0];

R[1]=A[1];

if (B[0]>R[0])

{

i1=B[0];

}

else

{

i1=R[0];

}

if (B[1]>R[1])

{

i2=B[1];

}

else

{

i2=R[1];

}

R[0]=i1;

R[1]=i2;

return(R);

}

function DrawRect(Canvas,A,C)

{

//画个矩形,“A、C”是对顶点

var p1,p2=new Array(2);

p1=GetSmallest(A,C);

p2=GetBiggest(A,C);

with (Canvas)

{

rect(p1[0],p1[1],p2[0]-p1[0],p2[1]-p1[1]);

}

}

function DrawTriangle(Canvas,A,B,C)

{

//画个三角形,“A、B、C”是顶点

with (Canvas)

{

moveTo(A[0],A[1]);

lineTo(B[0],B[1]);

lineTo(C[0],C[1]);

lineTo(A[0],A[1]);

}

}

function DrawAOB(Canvas,A,O,B)

{

//画个角,“O”是顶点,OA、OB是两条边

with (Canvas)

{

moveTo(A[0],A[1]);

lineTo(O[0],O[1]);

lineTo(B[0],B[1]);

}

}

function DrawRoundRect(Canvas,P1,P2,Radius)

{

//画个圆角矩形

var A=new Array(Math.min(P1[0],P2[0]),Math.min(P1[1],P2[1]));

var C=new Array(Math.max(P1[0],P2[0]),Math.max(P1[1],P2[1]));

var B=new Array(A[0],C[1]);

var D=new Array(C[0],A[1]);

Canvas.beginPath();

var P=new Array(A[0],A[1]+Radius);

DrawArcTo(Canvas,P,B,C,Radius);

var P=new Array(B[0]+Radius,B[1]);

DrawArcTo(Canvas,P,C,D,Radius);

var P=new Array(C[0],C[1]-Radius);

DrawArcTo(Canvas,P,D,A,Radius);

var P=new Array(D[0]-Radius,D[1]);

DrawArcTo(Canvas,P,A,B,Radius);

Canvas.stroke();

/*

Canvas.beginPath();

DrawAOBArc(Canvas,C,D,A,Radius);

Canvas.stroke();

Canvas.beginPath();

DrawAOBArc(Canvas,D,A,B,Radius);

Canvas.stroke();

Canvas.endPath();

*/

}

function DrawAOBArc(Canvas,A,O,B,Radius)

{

//画圆角

/* example:

var A=new Array(50,50);

var O=new Array(50,150);

var B=new Array(100,150);

hb.translate(30, 0); 

hb.beginPath();

hb.strokestyle="#000000";

DrawAOBArc(hb,A,O,B,20);

hb.stroke(); 

*/

with (Canvas)

{

moveTo(A[0],A[1]);

arcTo(O[0],O[1],B[0],B[1],Radius);

lineTo(B[0],B[1]);

}

}

function DrawQuadraticCurveTo(Canvas,A,O,B)

{

//画二次样条曲线路径,A:起点；B:终点；O:控制点

with (Canvas)

{

moveTo(A[0],A[1]);

bezierCurveTo(O[0],O[1],B[0],B[1]);

}

}

function DrawbezierCurveTo(Canvas,A,O1,O2,B)

{

//画贝塞尔曲线路径,O1和O2是控制点

with (Canvas)

{

moveTo(A[0],A[1]);

bezierCurveTo(O1[0],O1[1],O2[0],O2[1],B[0],B[1]);

}

}

function DrawArcTo(Canvas,A,O,B,Radius)

{

//画段弧线

with (Canvas)

{

moveTo(A[0],A[1]);

arcTo(O[0],O[1],B[0],B[1],Radius);

}

}

function DrawArc(Canvas,O,Radius,startAngle, endAngle, anticlockwise)

{

//画段弧线,startAngle:起始角度； endAngle：终止角度

//Example: DrawArc(hb,B,50,0,-90,true);//逆时针画弧线

//Example: DrawArc(hb,B,50,0,-90,false);//顺时针画弧线

with (Canvas)

{

arc(O[0],O[1],Radius,startAngle*Math.PI/180,
endAngle*Math.PI/180,
anticlockwise);

}

}

function DrawCircle(Canvas,O,Radius)

{

//画圆，例子：var B=new Array(150,150); DrawCircle(hb,B,50);

with (Canvas)

{

var x=O[0]+Radius;

var y=O[1];

moveTo(x,y);

for (var i=0;i<=360;i++)

{

var ii=i*Math.PI/180;

x=O[0]+Radius*Math.cos(ii);

y=O[1]-Radius*Math.sin(ii);

lineTo(x,y);

}//over for

}//over with

}//finished!

function DrawEllipse(Canvas,O,OA,OB)

{

//画椭圆，例子：var B=new Array(150,150); DrawEllipse(hb,B,50,30);

with (Canvas)

{

var x=O[0]+OA;

var y=O[1];

moveTo(x,y);

for (var i=0;i<=360;i++)

{

var ii=i*Math.PI/180;

var x=O[0]+OA*Math.cos(ii);

var y=O[1]-OB*Math.sin(ii);

lineTo(x,y);

}

}

}

function DrawPolyline(Canvas,P)

{

//绘制不闭合的线，P的长度必须是偶数

/*

var P=new Array(12);

P[0]=10;

P[1]=30;

P[2]=10;

P[3]=80;

P[4]=40;

P[5]=110;

P[6]=80;

P[7]=80;

P[8]=80;

P[9]=30;

P[10]=55;

P[11]=10;

hb.beginPath();

DrawPolyline(hb,P);

hb.stroke(); 

hb.endPath();

*/

var co=P.length;

var i=0;

while (i<co)

{

Canvas.moveTo(P[i],P[i+1]);

Canvas.lineTo(P[i+2],P[i+3]);

i=i+2;

}

}

function DrawPolygon(Canvas,P)

{

//画闭合的多边形

/* example :

var P=new Array(12);

P[0]=10;

P[1]=30;

P[2]=10;

P[3]=80;

P[4]=40;

P[5]=110;

P[6]=80;

P[7]=80;

P[8]=80;

P[9]=30;

P[10]=55;

P[11]=10;

hb.beginPath();

DrawPolygon(hb,P);

hb.stroke(); 

hb.endPath();

*/

var co=P.length-1;

DrawPolyline(Canvas,P)

Canvas.moveTo(P[0],P[1]);

Canvas.lineTo(P[co-1],P[co]);

}

本文节选自我金海龙2010年写的《 HTML5
Canvas 作图函数库2.0版本.pdf 》,

在HTML5刚登陆中国大陆的时候，奇缺权威资料，我及时写作，刚一发布，就引起了关注，也成为被盗版的目标，当你们在Google搜索：HTML5
作图 就可以看到我金海龙作品的排名。

这正说明了我的编程实力。

再接再厉，做完一个版本、开发完一次，才能觉得不完美。

我最近正在写作《HTML
5 Canvas应用开发者指南》，写完一章节，就发布在我金海龙的个人主页上，

在我个人博客上只发表其中一些部分段落，写写感想，或者其它的，只要我有时间的话。