Canvas绘制文字、设置阴影、创建路径绘制矩形和圆

Canvas绘制文字

1、属性

   1）与css的font属性类似，接受值也完全相同

       font    context.font = "20px red 微软雅黑";
       
   2）水平对齐方式，值可以是left、right和center 
   
       textAlign
       textAlign居中方式
            1.绘制文本的区域，就是文本所占的那一块区域。假如一个文本所用的区域是20*20，此时居中来说对该文本没有任何意义。所以此时的居中并不是针对文字而是针对基线
            2.如果是向右居中，逻辑如下
               1）在紧挨文本的左侧画一条竖直方向的线
               2）移动文本，让线处于文本的右边
               3）其他水平居中方式同理

       绘制文本的基准线
           context.beginPath();
           context.moveTo(200,0);
           context.lineTo(200,400);
           context.stroke();


   3）文本基线,设置垂直方向对齐,值可以是top、middle和bottom，alphabetic（默认值，字母基线）hanging（ 悬挂基线）

       textBaseline，和水平居中用法类似

   注意： 无论是水平方向对齐还是垂直方向对齐，都是基准线对齐，并不是文字对齐

2、方法

   1）在指定位置绘制空心文字，后面的x,y指的是左下角的坐标

       strokeText(text,x,y)
    
   2）在指定位置绘制实心文字

       fillText(text,x,y)

   3）返回指定文字的大小信息

       measureText()，返回的是宽这里

Canvas设置阴影

1、使用CSS语法声明阴影颜色

    shadowColor

 2、接受一个数字，确定对象阴影的水平投射距离
  
    shadowOffsetX

 3、接受一个数字，确定对象阴影的垂直投射距离
  
    shadowOffsetY

 4、为阴影生成模糊效果

    shadowBlur  直接写数字

Canvas创建路径，绘制矩形和圆

1、标识方法

  开始创建路径，每次绘制新图形之前，都要先重新创建一个路径

    beginPath()

  结束创建路径，主要用于让线条闭合

    closePath()

  直接绘制图形和用路径绘制图形的区别
            
      直接绘制不需要调用beginPath()
      使用路径绘制必须调用beginPath()
            
      fillRect()  =>  rect()+fill()

2、设置方法

  设置矩形形状

    rect(x,y,width,height) 
    x和y - 矩形的左上角
    width/height - 矩形的宽和高

  设置圆形形状

    arc(x,y,radius,startAngle,endAngle,direction)
    x/y - 设置圆心的坐标值
    radius - 圆形的半径
    startAngle - 开始位置  使用角度
    endAngle - 结束位置   使用角度  Math.PI
    direction - 方向：默认值为false，表示顺时针,true表示逆时针

3、示例

效果图.png