569day(绘制在画布中心的一段文字.html)

《2019年4月27日》【连续 569天】

标题：绘制在画布中心的一段文字.html；
内容：

var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');

    /*1.在画布的中心绘制一段文字*/
    /*2.申明一段文字*/
    var str = '您吃-,了吗';
    /*3.确定画布的中心*/
    var w = ctx.canvas.width;
    var h = ctx.canvas.height;
    /*4.画一个十字架在画布的中心*/
    ctx.beginPath();
    ctx.moveTo(0, h / 2 - 0.5);
    ctx.lineTo(w, h / 2 - 0.5);
    ctx.moveTo(w / 2 - 0.5, 0);
    ctx.lineTo(w / 2 - 0.5, h);
    ctx.strokeStyle = '#eee';
    ctx.stroke();
    /*5.绘制文本*/
    ctx.beginPath();
    ctx.strokeStyle = '#000';
    var x0 = w/2;
    var y0 = h/2;
    /*注意：起点位置在文字的左下角*/
    /*有文本的属性  尺寸 字体  左右对齐方式  垂直对齐的方式*/
    ctx.font = '40px Microsoft YaHei';
    /*左右对齐方式 (center left right start end) 基准起始坐标*/
    ctx.textAlign = 'center';
    /*垂直对齐的方式 基线 baseline(top,bottom,middle) 基准起始坐标*/
    ctx.textBaseline = 'middle';
    //ctx.direction = 'rtl';
    //ctx.strokeText(str,x0,y0);
    ctx.fillText(str,x0,y0);
    /*6.画一个下划线和文字一样长*/
    ctx.beginPath();
    /*获取文本的宽度*/
    console.log(ctx.measureText(str));
    var width = ctx.measureText(str).width;
    ctx.moveTo(x0-width/2,y0 + 20);
    ctx.lineTo(x0+width/2,y0 + 20);
    ctx.stroke();