【HTML5 绘图与动画】 绘制文本 1. 填充文字 fillText( ) 2. 轮廓文字 strokeText( ) 3. 文本样式 textAlign、textBaseline 4. 测量宽度 measureText( )

以下内容为学习下图这本书做的笔记，非原创。做笔记主要是为了实践一下看看结果加深记忆。

目录：

1. 填充文字  2. 轮廓文字  3. 文本样式 4. 测量宽度

1. 填充文字 

用法： context.fillText( 在画布上输出的文本，开始绘制文本的x坐标位置， 开始绘制文本的y坐标位置， 允许的最大文本宽度(以像素计)(可选) )

① 用 fillText() 方法在画布上绘制文本 “Hi” 和 "Canvas API"

语句：

<canvas id="canvas" width="300" height="200" style="border:solid 1px #999;"></canvas>
<script>
    draw();
    function draw(){
        //使用document.getElementById() 方法, 根据 canvas 元素的 id 获取对 canvas 的引用
        var ctx = document.getElementById('canvas').getContext('2d');
        var font = "40px Georgia";
        ctx.fillText("Hi", 10, 50); //绘制填色文字
        ctx.font = "50px Verdana";
        //创建渐变
        var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
        gradient.addColorStop("0","magenta");　　//通过多个 addColorStop() 方法来定义渐变，与 createLinearGradient()方法配合使用
        gradient.addColorStop("0.5","blue");
        gradient.addColorStop("1.0","red");
        //用渐变填色
        ctx.fillStyle=gradient;
        ctx.fillText("Canvas API",10, 120);
    }
</script>

页面表现：

2. 轮廓文字 

用法： context.strokeText( 在画布上输出的文本，开始绘制文本的x坐标位置， 开始绘制文本的y坐标位置， 允许的最大文本宽度(以像素计)(可选) )

① 用 strokeText() 方法绘制文本 “ Hi ” 和 " Canvas API "

语句：

<canvas id="canvas" width="300" height="200" style="border:solid 1px #999;"></canvas>
<script>
    draw();
    function draw(){
        //使用document.getElementById() 方法, 根据 canvas 元素的 id 获取对 canvas 的引用
        var ctx = document.getElementById('canvas').getContext('2d');
        var font = "40px Georgia";
        ctx.fillText("Hi", 10, 50); //绘制填色文字
        ctx.font = "50px Verdana";
        //创建渐变
        var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
        gradient.addColorStop("0","magenta");　　//通过多个 addColorStop() 方法来定义渐变，与 createLinearGradient()方法配合使用
        gradient.addColorStop("0.5","blue");
        gradient.addColorStop("1.0","red");
        //用渐变填色
        ctx.strokeStyle=gradient;
        ctx.strokeText("Canvas API",10, 120);
    }
</script>

页面表现：

3. 文本样式

① 在x轴150px的位置创建一条竖线。位置150就被定义为所有文本的锚点。然后比较每种 textAlign 属性值对齐效果

语句：

<canvas id="canvas" width="300" height="200" style="border:solid 1px #999;"></canvas>
<script>
    draw();
    function draw(){
        //使用document.getElementById() 方法, 根据 canvas 元素的 id 获取对 canvas 的引用
        var ctx = document.getElementById('canvas').getContext('2d');
        //在位置 150 创建一条竖线
        ctx.strokeStyle ="blue";
        ctx.moveTo(150, 20);
        ctx.lineTo(150, 170);
        ctx.stroke();
        ctx.font="15px Arial";
        //显示不同的 textAlign 值，textAlign:设置正在绘制的文本水平对齐方式
        ctx.textAlign="start";  //文本在指定的位置 开始
        ctx.fillText("textAlign=start",150,60);
        ctx.textAlign="end";    //文本在指定的位置 结束
        ctx.fillText("textAlign=end",150,80);
        ctx.textAlign="center"; //文本的中心被放置在指定的位置
        ctx.fillText("textAlign=center",150,100);
        ctx.textAlign="left";   //文本左对齐
        ctx.fillText("textAlign=left",150,120);
        ctx.textAlign="right";  //文本右对齐
        ctx.fillText("textAlign=right",150,140);
    }
</script>

页面表现：

② 在 y 轴 100px 的位置创建一条水平线。位置 100 就被定义为用蓝色填充的矩形。然后比较每种 textBaseline 属性值对齐效果。

语句：

<canvas id="canvas" width="350" height="300" style="border:solid 1px #999;"></canvas>
<script>
    draw();
    function draw(){
        //使用document.getElementById() 方法, 根据 canvas 元素的 id 获取对 canvas 的引用
        var ctx = document.getElementById('canvas').getContext('2d');
        //在位置 y = 100 绘制蓝色线条
        ctx.strokeStyle = "blue";
        ctx.moveTo(5, 100);
        ctx.lineTo(395, 100);
        ctx.stroke();
        ctx.font="20px Arial";
        //在 y=100 以不同的 textBaseline 值放置每个单词
        //textBaseline ：设置正在绘制的文本基线的对齐方式，即文本垂直对齐方式
        ctx.textBaseline="top";     //文本基线是 em 方框的顶端
        ctx.fillText("top",5,100);
        ctx.textBaseline="bottom";  //文本基线是 em 方框的底端
        ctx.fillText("bottom",50,100);
        ctx.textBaseline="middle";  //文本基线是 em 方框的正中
        ctx.fillText("middle",120,100);
        ctx.textBaseline="alphabetic";  //文本基线是普通的字母基线
        ctx.fillText("alphabetic",190,100);
        ctx.textBaseline="hanging";     //文本基线是悬挂基线
        ctx.fillText("hanging",250,100);
    }
</script>

页面表现：

 4. 测量宽度

① 测量文字宽度

用法：context.measureText( 要绘制的文字 )

语句：

<canvas id="canvas" width="350" height="300" style="border:solid 1px #999;"></canvas>
<script>
    draw();
    function draw(){
        //使用document.getElementById() 方法, 根据 canvas 元素的 id 获取对 canvas 的引用
        var ctx = document.getElementById('canvas').getContext('2d');
        ctx.font = "bold 20px 楷体";
        ctx.fillStyle = "blue";
        var txt1 = "HTML5+CSS3";
        ctx.fillText(txt1, 10, 40);
        var txt2 = "以上字符串的宽度为：";
        var mtx1 = ctx.measureText(txt1);
        var mtx2 = ctx.measureText(txt2);
        ctx.font = "bold 15px 宋体";
        ctx.fillStyle = "red";
        ctx.fillText(txt2, 10, 80);
        ctx.fillText(mtx1.width,mtx2.width,80);
    }
</script>

页面表现：