canvas绘制文本 圆弧 详解

canvas绘制文本 strokeText()绘制的是空心的文本，fillText设置的是实心的文本 < script >     var  canvas =  document . getElementById ( "canvas" );     var  ctx = canvas . getContext ( "2d" );     ctx . font = "30px  微软雅黑 " ;     ctx . strokeStyle = "hotpink" ;     ctx . strokeText ( "Hello Javascript!" , 50 , 50 );     ctx . fillStyle = "red" ;     ctx . fillText ( "Javascript 是世界上最好的语言 " , 50 , 200 ); //    ctx.beginPath();     ctx . strokeStyle = "blue" ;     ctx . strokeText ( "Hello Javascript!" , 50 , 300 ); </ script > 绘制文字的对其方式： textAlign：start（左对齐） end（右对齐） center（居中对齐） 示例demo： < script >     //textAlign ：设置文本的水平对齐方式 i     // 默认值： start--->left 左对齐     //      end--->right 右对齐     //      center ：居中对齐     var  canvas =  document . getElementById ( "canvas" );     var  ctx = canvas . getContext ( "2d" );     ctx . moveTo ( 300 , 0 );     ctx . lineTo ( 300 , 600 );     ctx . stroke ();     ctx . textAlign = "center" ;     ctx . font = "30px  微软雅黑 " ;     ctx . strokeStyle = "hotpink" ;     ctx . strokeText ( "Hello Javascript!" , 300 , 50 ); </ script > measureText（）方法获取绘制的文本的宽度； 示例demo： < script >     var  canvas =  document . getElementById ( "canvas" );     var  ctx = canvas . getContext ( "2d" );     // 在计算文本宽度的时候，会自动判定当前状态下设置的字体大小     var  obj=ctx . measureText ( "Hello Javascript!" );     console . log ( obj . width ); // 获取文本的宽度 </ script > 绘制文本的垂直对其方式： textBaseline属性，取值为top hanging middle baseline bottom，默认为基线对其 < script >     var  canvas =  document . getElementById ( "canvas" );     var  ctx = canvas . getContext ( "2d" );     // 绘制水平的参考线：     ctx . moveTo ( 0 , 50 );     ctx . lineTo ( 800 , 50 );     ctx . stroke ();     ctx . textBaseline = "middle" ;     ctx . font = "30px  微软雅黑 " ;     ctx . strokeStyle = "hotpink" ;     ctx . strokeText ( "Hello Javascript!" , 300 , 50 ); //    ctx.strokeText(" 我是中国人，我爱我的祖国 ",300,50); </ script > < script >     var  canvas =  document . getElementById ( "canvas" );     var  ctx = canvas . getContext ( "2d" );     // 绘制水平的参考线：     ctx . moveTo ( 0 , 50 );     ctx . lineTo ( 800 , 50 );     ctx . stroke ();     ctx . textBaseline = "hanging" ;     ctx . font = "30px  微软雅黑 " ;     ctx . strokeStyle = "hotpink" ; //    ctx.strokeText("Hello Javascript!",300,50);     ctx . strokeText ( " 我是中国人，我爱我的祖国 " , 300 , 50 ); </ script > < script >     var  canvas =  document . getElementById ( "canvas" );     var  ctx = canvas . getContext ( "2d" );     // 绘制水平的参考线：     ctx . moveTo ( 0 , 50 );     ctx . lineTo ( 800 , 50 );     ctx . stroke ();     ctx . textBaseline = "bottom" ; //    ctx.textBaseline="top";     ctx . font = "30px  微软雅黑 " ;     ctx . strokeStyle = "hotpink" ; //    ctx.strokeText("Hello Javascript!",300,50);     ctx . strokeText ( " 我是中国人，我爱我的祖国 " , 300 , 50 ); </ script > 绘制圆弧 1. arc(圆心 x，圆心 y，半径，开始弧度，结束弧度 ,是否以逆时针方式绘制 ) 2. 整个圆是 2*Math.PI的， 0的位置位于圆心水平往右拉直线， Math.PI/2就位于圆心的正下方 3. 默认的绘制方式是：顺时针，可以通过 arc方法的底 6个参数传递值为 true表示逆时针方式绘制 利用arc方法绘制圆弧，接收六个参数 示例demo： < script >     var  canvas =  document . getElementById ( "canvas" );     var  ctx = canvas . getContext ( "2d" );     ctx . arc ( 300 , 300 , 150 , - 0.7 * Math . PI , 0.5 * Math . PI );     ctx . stroke (); </ script > < script >     var  canvas =  document . getElementById ( "canvas" );     var  ctx = canvas . getContext ( "2d" );     // 弧度的值：圆弧上的点     // 规定：从圆心往右接触到的这个点对应的弧度值为： 0     // 从弧度为 0 的位置开始顺时针旋转，弧度的值越来越大     //      转 60 度： -->PI/3     //        90 度： -->PI/2     //       180 度： -->PI     //       270 度： 1.5PI     //      360 度： 2PI     // 从弧度为 0 的位置开始逆时针旋转，弧度的值越来越小     // 弧度差：形成的夹角对应的弧度 </ script > 绘制圆弧的demo： < script >     var  canvas =  document . getElementById ( "canvas" );     var  ctx = canvas . getContext ( "2d" );     ctx . arc ( 300 , 300 , 150 , 0.7 * Math . PI , 1.3 * Math . PI );     ctx . stroke ();     ctx . beginPath ();     ctx . arc ( 400 , 300 , 150 , 1.3 * Math . PI , 0.7 * Math . PI , true );     ctx . stroke (); </ script > 绘制实心的圆弧： < script >     var  canvas =  document . getElementById ( "canvas" );     var  ctx = canvas . getContext ( "2d" );     ctx . moveTo ( 300 , 300 );     ctx . arc ( 300 , 300 , 150 , 0 , Math . PI / 3 );     ctx . fill (); </ script > 圆动画：demo < script >     var  canvas =  document . getElementById ( "canvas" );     var  ctx = canvas . getContext ( "2d" );     var  endRadian=- 0.4 * Math . PI ;     var  timer= setInterval ( function (){         ctx . clearRect ( 0 , 0 , canvas . width , canvas . height );         ctx . beginPath ();         ctx . moveTo ( 300 , 300 );         ctx . arc ( 300 , 300 , 150 , - 0.5 * Math . PI , endRadian );         ctx . fill ();         // 清除定时器：         if ( endRadian>= 1.5 * Math . PI ){             clearInterval ( timer );         }         console . log ( "stop" );         endRadian+= 0.01 * Math . PI ;     }, 20 ) </ script >