HTML5 Canvas 作图函数库 2.0版本

HTML5 Canvas 作图函数库 2.0版本 H T M L 5H T M L 5H T M L 5H T M L 5 作图函数库作图函数库作图函数库作图函数库 Canvas 函数库作者：金海龙(bigengineer@163.com) 前不久，我发布了一个 HTML5 Canvas初等作图函数库，很多个人开发者关注了我，所以我打算完善这个用 JavaScript写成的函数库. 下面详细介绍新增的函数，需要源代码的Web开发者，可在页底查看下载链接。要运行下面的源代码，需要使用 Google浏览器或者 IE ...

H T M L 5H T M L 5H T M L 5H T M L 5 作图函数库作图函数库作图函数库作图函数库 Canvas 函数库作者：金海龙(bigengineer@163.com) 前不久，我发布了一个 HTML5 Canvas初等作图函数库，很多个人开发者关注了我，所以我打算完善这个用 JavaScript写成的函数库. 下面详细介绍新增的函数，需要源代码的Web开发者，可在页底查看下载链接。要运行下面的源代码，需要使用 Google浏览器或者 IE 9 注：下列绘图函数都是“bigengineer.js”中的内容，这个文档可以在如下网址下载： http://www.filefactory.com/file/b3d9992/n/bigengineer_rar 也可以网络浏览： http://www.docstoc.com/docs/document-preview.aspx?doc_id=56753328 1、function DrawRoundRect(Canvas,P1,P2,Radius) 功能：画正圆角矩形参数：P1：矩形左上角坐标；P2：矩形右下角坐标； Radius：圆角大小实例： src="bigengineer.js">src="bigengineer.js">src="bigengineer.js">

height="2000">height="2000">height="2000"> type="text/javascript">type="text/javascript">type="text/javascript"> varvarvarvar c=document.getElementById("cc");c=document.getElementById("cc");c=document.getElementById("cc");c=document.getElementById("cc"); varvarvarvar hb=c.getContext("2d");hb=c.getContext("2d");hb=c.getContext("2d");hb=c.getContext("2d"); varvarvarvarA=newA=newA=newA=newArray(55,55);Array(55,55);Array(55,55);Array(55,55); varvarvarvar C=newC=newC=newC=newArray(150,150);Array(150,150);Array(150,150);Array(150,150); hb.beginPath();hb.beginPath();hb.beginPath();hb.beginPath(); hb.strokestyle="#000000";hb.strokestyle="#000000";hb.strokestyle="#000000";hb.strokestyle="#000000"; DrawRoundRect(hb,A,C,10);DrawRoundRect(hb,A,C,10);DrawRoundRect(hb,A,C,10);DrawRoundRect(hb,A,C,10); hb.stroke();hb.stroke();hb.stroke();hb.stroke(); hb.endPath();hb.endPath();hb.endPath();hb.endPath(); 用 GoogleGoogleGoogleGoogle浏览器浏览的效果如下：如果 Radius设置的太大，那么就能画出意想不到的图片，例如： …… DrawRoundRect(hb,A,C,80);//把 Radius设置成 80 hb.stroke(); …… 用 Google浏览器浏览的效果如下： …… DrawRoundRect(hb,A,C,100);//把 Radius设置成 100 hb.stroke(); …… 用 Google浏览器浏览的效果如下： 2、function DrawAOBArc(Canvas,A,O,B,Radius) 功能：画圆角参数：Radius：圆角的大小；A，B：边上两点；实例： src="bigengineer.js">src="bigengineer.js">src="bigengineer.js">

height="2000">height="2000">height="2000"> type="text/javascript">type="text/javascript">type="text/javascript"> varvarvarvar c=document.getElementById("cc");c=document.getElementById("cc");c=document.getElementById("cc");c=document.getElementById("cc"); varvarvarvar hb=c.getContext("2d");hb=c.getContext("2d");hb=c.getContext("2d");hb=c.getContext("2d"); varvarvarvarA=newA=newA=newA=newArray(5,5);Array(5,5);Array(5,5);Array(5,5); varvarvarvar O=newO=newO=newO=newArray(130,130);Array(130,130);Array(130,130);Array(130,130); varvarvarvar B=newB=newB=newB=newArray(5,150);Array(5,150);Array(5,150);Array(5,150); hb.beginPath();hb.beginPath();hb.beginPath();hb.beginPath(); hb.strokestyle="#000000";hb.strokestyle="#000000";hb.strokestyle="#000000";hb.strokestyle="#000000"; DrawAOBArc(hb,A,O,B,10);DrawAOBArc(hb,A,O,B,10);DrawAOBArc(hb,A,O,B,10);DrawAOBArc(hb,A,O,B,10); hb.stroke();hb.stroke();hb.stroke();hb.stroke(); hb.endPath();hb.endPath();hb.endPath();hb.endPath(); 用 GoogleGoogleGoogleGoogle浏览器浏览的效果如下： 3、function DrawQuadraticCurveTo(Canvas,A,O,B) 功能：画二次样条曲线路径参数：A:起点；B:终点；O:控制点 4、function DrawbezierCurveTo(Canvas,A,O1,O2,B) 功能：画贝塞尔曲线路径参数：O1和 O2是控制点实例：

用 GoogleGoogleGoogleGoogle浏览器浏览的效果如下： 5、function DrawArcTo(Canvas,A,O,B,Radius) 功能：画段弧线参数：Radius：弧的大小实例：

用 GoogleGoogleGoogleGoogle浏览器浏览的效果如下： 6、function DrawArc(Canvas,O,Radius,startAngle, endAngle, anticlockwise) 功能：画段弧线参数：startAngle:起始角度； endAngle：终止角度； anticlockwise：是否按照逆时针方向画弧；实例： Example 1: DrawArc(hb,B,50,0,-90,true);//逆时针画弧线 Example 2: DrawArc(hb,B,50,0,-90,false);//顺时针画弧线

用 GoogleGoogleGoogleGoogle浏览器浏览的效果如下： 7、function DrawCircle(Canvas,O,Radius) 功能：画圆参数：O：圆心； Radius：半径；实例： var B=newArray(150,150); DrawCircle(hb,B,50); 下面是一个完整的例子：

用 GoogleGoogleGoogleGoogle浏览器浏览的效果如下： 8、function DrawEllipse(Canvas,O,OA,OB) 功能：画椭圆参数：O：椭圆中心的坐标； OA，OB：长轴、短轴的长度实例：

用 GoogleGoogleGoogleGoogle浏览器浏览的效果如下： 9、function DrawPolyline(Canvas,P) 功能：绘制不闭合的线参数：P中是多个点的坐标，P的长度必须是偶数实例：

用 GoogleGoogleGoogleGoogle浏览器浏览的效果如下： 10、function DrawPolygon(Canvas,P) 功能：画闭合的多边形参数：P是一个包含各个顶点坐标的数组实例：

用 GoogleGoogleGoogleGoogle浏览器浏览的效果如下：记住我的名字，用 Google搜索就能找到我，GoogleGoogleGoogleGoogle搜索：金海龙天主教所有的函数都写在“bigengineer.js”这个文件中，下载地址如下： http://www.filefactory.com/file/b3d9992/n/bigengineer_rar 提示：在 FileFactory下载这个文件，下载链接在底部，要等待 30秒。 http://www.docin.com/p-86276039.html 如果大家觉得有必要谢谢函数编制的原理，欢迎在我的博客留言。

                    本文档为【HTML5 Canvas 作图函数库 2.0版本】，请使用软件OFFICE或WPS软件打开。作品中的文字与图均可以修改和编辑，
                    图片更改请在作品中右键图片并更换，文字修改请直接点击文字进行修改，也可以新增和删除文档中的内容。 
 该文档来自用户分享，如有侵权行为请发邮件ishare@vip.sina.com联系网站客服，我们会及时删除。

                    [版权声明] 本站所有资料为用户分享产生，若发现您的权利被侵害，请联系客服邮件isharekefu@iask.cn，我们尽快处理。

                    本作品所展示的图片、画像、字体、音乐的版权可能需版权方额外授权，请谨慎使用。

                    网站提供的党政主题相关内容(国旗、国徽、党徽..)目的在于配合国家政策宣传，仅限个人学习分享使用，禁止用于任何广告和商用目的。
                

下载需要：免费已有0 人下载

立即下载

HTML5 Canvas 作图函数库 2.0版本

你可能还喜欢