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 >