admin 管理员组

文章数量: 887021


2024年2月19日发(作者：数组常用方法js)

HTML5作图函数库Canvas函数库作者：金海龙(bigengineer@)前不久，我发布了一个HTML5Canvas初等作图函数库，很多个人开发者关注了我，所以我打算完善这个用JavaScript写成的函数库.下面详细介绍新增的函数，需要源代码的Web开发者，可在页底查看下载链接。要运行下面的源代码，需要使用Google浏览器或者IE9注：下列绘图函数都是“”中的内容，这个文档可以在如下网址下载：/file/b3d9992/n/bigengineer_rar也可以网络浏览：/docs/?doc_id=567533281、functionDrawRoundRect(Canvas,P1,P2,Radius)功能：画正圆角矩形

参数：P1：矩形左上角坐标；P2：矩形右下角坐标；Radius：圆角大小实例：varc=mentById("cc");varhb=text("2d");varA=newArray(55,55);varC=newArray(150,150);ath();style="#000000";DrawRoundRect(hb,A,C,10);();h();用Google浏览器浏览的效果如下：如果Radius设置的太大，那么就能画出意想不到的图片，例如：

……DrawRoundRect(hb,A,C,80);//把Radius设置成();……用Google浏览器浏览的效果如下：……DrawRoundRect(hb,A,C,100);//把Radius设置成();……用Google浏览器浏览的效果如下：

2、functionDrawAOBArc(Canvas,A,O,B,Radius)功能：画圆角参数：Radius：圆角的大小；A，B：边上两点；实例：varc=mentById("cc");varhb=text("2d");varA=newArray(5,5);varO=newArray(130,130);varB=newArray(5,150);ath();style="#000000";DrawAOBArc(hb,A,O,B,10);();

h();用Google浏览器浏览的效果如下：3、functionDrawQuadraticCurveTo(Canvas,A,O,B)功能：画二次样条曲线路径参数：A:起点；B:终点；O:控制点4、functionDrawbezierCurveTo(Canvas,A,O1,O2,B)功能：画贝塞尔曲线路径参数：O1和O2是控制点实例：varc=mentById("cc");varhb=text("2d");

varA=newArray(50,50);varO1=newArray(90,30);varO2=newArray(110,35);varB=newArray(150,50);ath();style="#000000";DrawbezierCurveTo(hb,A,O1,O2,B);();h();用Google浏览器浏览的效果如下：5、functionDrawArcTo(Canvas,A,O,B,Radius)功能：画段弧线参数：Radius：弧的大小实例：

varc=mentById("cc");varhb=text("2d");varA=newArray(50,50);varO=newArray(90,10);varB=newArray(150,50);ath();style="#000000";DrawArcTo(hb,A,O,B,35);();h();用Google浏览器浏览的效果如下：6、functionDrawArc(Canvas,O,Radius,startAngle,endAngle,anticlockwise)功能：画段弧线

参数：startAngle:起始角度；endAngle：终止角度；anticlockwise：是否按照逆时针方向画弧；实例：Example1:DrawArc(hb,B,50,0,-90,true);//逆时针画弧线Example2:DrawArc(hb,B,50,0,-90,false);//顺时针画弧线varc=mentById("cc");varhb=text("2d");varB=newArray(150,100);ath();style="#000000";DrawArc(hb,B,90,-135,true);();h();用Google浏览器浏览的效果如下：

7、functionDrawCircle(Canvas,O,Radius)功能：画圆参数：O：圆心；Radius：半径；实例：varB=newArray(150,150);DrawCircle(hb,B,50);下面是一个完整的例子：varc=mentById("cc");varhb=text("2d");varB=newArray(150,100);ath();style="#000000";DrawCircle(hb,B,80);

();h();用Google浏览器浏览的效果如下：8、functionDrawEllipse(Canvas,O,OA,OB)功能：画椭圆参数：O：椭圆中心的坐标；OA，OB：长轴、短轴的长度实例：varc=mentById("cc");varhb=text("2d");varA=newArray(50,50);varO=newArray(90,10);varB=newArray(150,100);

ath();style="#000000";DrawEllipse(hb,B,50,90);();h();用Google浏览器浏览的效果如下：9、functionDrawPolyline(Canvas,P)功能：绘制不闭合的线参数：P中是多个点的坐标，P的长度必须是偶数实例：varc=mentById("cc");varhb=text("2d");

varP=newArray(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;ath();DrawPolyline(hb,P);();h();用Google浏览器浏览的效果如下：10、functionDrawPolygon(Canvas,P)功能：画闭合的多边形

参数：P是一个包含各个顶点坐标的数组实例：varc=mentById("cc");varhb=text("2d");varP=newArray(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;

ath();DrawPolyline(hb,P);();h();用Google浏览器浏览的效果如下：记住我的名字，用Google搜索就能找到我，Google搜索：金海龙天主教所有的函数都写在“”这个文件中，下载地址如下：/file/b3d9992/n/bigengineer_rar提示：在FileFactory下载这个文件，下载链接在底部，要等待30秒。/

如果大家觉得有必要谢谢函数编制的原理，欢迎在我的博客留言。


本文标签： 参数 功能 下载 实例 函数库

版权声明：本文标题：HTML5+Canvas+作图函数库+2.0版本 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/free/1708318474h519520.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。