canvas之绘制文字

• 填充绘制filleText

 //获取画布。  相当于拿到了绘画的一张纸
    var cas = document.getElementById('cvs');
    //有了纸后，还需要有一只笔才能进行绘画。 这是一个绘画2d图形的笔
    var pencil = cas.getContext('2d');

    //开始绘画
    pencil.beginPath();

    //设置字体的颜色
    pencil.fillStyle="blue";
    //设置字体样式
    pencil.font='bold 50px 宋体';
    //设置字体水平对齐方式  注意** 是字体相对于画笔起始点的y轴的位置。字体的中间紧挨着y轴
    pencil.textAlign="center";
    //设置字体垂直对齐方式  注意** 是字体相对于画笔起始点的x轴的位置。字体的顶部位于紧挨着x轴
    pencil.textBaseline="top";
     //参数描述： 字体内容  字体的起始位置， 字体的最大宽度（防止字体溢出）
    pencil.fillText("hello world", 200,200, 600);
    pencil.fill();

• 描边绘制strokeText

    pencil.font="bold 60px 隶属";
    pencil.strokeStyle="pink";
    
    pencil.strokeText("hello world",200,200, 300);
    pencil.stroke();