摘要: 6、function DrawArc(Canvas,O,Radius,startAngle, endAngle, anticlockwise)功能:画段弧线参数:startAngle:起始角度; endAngle:终止角度; anticlockwise:是否按照逆时针方向画弧;源代码:function DrawArc(Canvas,O,Radius,startAngle, endAngle, anticlockwise){//画段弧线,startAngle:起始角度; endAngle:终止角度//Example: DrawArc(hb,B,50,0,-90,true);//逆时针画... 阅读全文
posted @ 2012-08-13 09:36 HTML Canvas 阅读(1618) 评论(0) 推荐(0) 编辑
摘要: 10、function DrawPolygon(Canvas,P)功能:画闭合的多边形参数:P是一个包含各个顶点坐标的数组实例:<html><script type="text/javascript" src="bigengineer.js"></script><body><canvas id="cc" width="2000" height="2000"></canvas><script type="tex 阅读全文
posted @ 2012-08-13 09:31 HTML Canvas 阅读(4478) 评论(1) 推荐(0) 编辑
摘要: 8、function DrawEllipse(Canvas,O,OA,OB)功能:画椭圆参数:O:椭圆中心的坐标; OA,OB:长轴、短轴的长度源代码: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); 阅读全文
posted @ 2012-08-13 09:27 HTML Canvas 阅读(720) 评论(0) 推荐(0) 编辑
摘要: 2、function DrawAOBArc(Canvas,A,O,B,Radius)功能:画圆角参数:Radius:圆角的大小;A,B:边上两点;源代码: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) 阅读全文
posted @ 2012-08-13 09:21 HTML Canvas 阅读(496) 评论(0) 推荐(0) 编辑
摘要: function DrawRoundRect(Canvas,P1,P2,Radius)功能:画正圆角矩形参数:P1:矩形左上角坐标;P2:矩形右下角坐标; Radius:圆角大小源代码: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]);v... 阅读全文
posted @ 2012-08-13 08:44 HTML Canvas 阅读(5260) 评论(0) 推荐(0) 编辑
摘要: /*名称:金海龙HTML5 Canvas 作图函数库 2012版版本:2.0作者:金海龙(高级软件工程师)博客:http://htmlcanvas.webgarden.comGoogle搜索: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(Mat 阅读全文
posted @ 2012-08-13 08:09 HTML Canvas 阅读(789) 评论(0) 推荐(0) 编辑
摘要: 简化作图步骤,重写作图函数(画一个三角形):functionDrawTriangle(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]);}}把这个函数写进“bigengineer.js”中。下面是更多的实例,这些例子都很有代表性,一通百通:4、画个三角形:<html><head><title>Google搜索:HTML 5金海龙</title><scriptt 阅读全文
posted @ 2012-08-06 10:27 HTML Canvas 阅读(1871) 评论(0) 推荐(0) 编辑
摘要: 简化作图步骤,重写作图函数:functionDrawRect(Canvas,A,C){//画个矩形,“A、C”是对顶点varp1,p2=newArray(2);p1=GetSmallest(A,C);p2=GetBiggest(A,C);with(Canvas){rect(p1[0],p1[1],p2[0]-p1[0],p2[1]-p1[1]);}}其中所用到的两个函数如下:functionGetSmallest(A,B){vari,co,i1,i2;varR=newArray(2);//返回P中X最小和Y最小的数,然后组成新的点返回R[0]=A[0];R[1]=A[1];if(B[0]< 阅读全文
posted @ 2012-08-06 10:20 HTML Canvas 阅读(2309) 评论(0) 推荐(0) 编辑
摘要: 由于HTML5提供的画线段函数太麻烦,所以需要封装一下:functionDrawLine(Canvas,A,B){//画一条线段,“A、B”是这条线段的端点with(Canvas){moveTo(A[0],A[1]);lineTo(B[0],B[1]);}}把这个函数写进“bigengineer.js”中。下面是更多的实例,这些例子都很有代表性,一通百通:2、画一条线段:<html><head><title>Google搜索:HTML 5金海龙</title><scripttype="text/javascript"sr 阅读全文
posted @ 2012-08-06 10:09 HTML Canvas 阅读(2585) 评论(0) 推荐(0) 编辑
摘要: 从这篇文章开始,你们会看到权威的HTML5 Canvas作图技术,下面是相关图片: 画布上有一点p(19,82),在JavaScript中表示?可以用以下方式:varp=newArray(2);p[0]=19;p[1]=82;这一点也能被作为“绘图函数的参数”,看下面的内容:functionDrawP(Canvas,P){//在点P处画一个点with(Canvas){moveTo(P[0],P[1]);lineTo(P[0]+1,P[1]+1);}}调用方法:DrawP(Canvas,P);下面是更多的实例,这些例子都很有代表性,一通百通:1、在画布的(50,50)处,画一个点:<htm 阅读全文
posted @ 2012-08-06 09:50 HTML Canvas 阅读(9735) 评论(1) 推荐(0) 编辑