【canvas】绘制文字

第一丶绘画镂空字体

        var canvas=document.querySelector("#chen");//找到画布才能操作
        var c=canvas.getContext('2d');//定义画布为2d
        c.font="50px '微软雅黑'";//设置字体大小和字体
        c.strokeStyle="#f1b913";//设置字体的颜色
        c.strokeText("banana",100,100);//绘画镂空字体

结果为:

第二丶绘画填充文字

        var canvas=document.querySelector("#chen");//找到画布才能操作
        var c=canvas.getContext('2d');//定义画布为2d
        c.font="50px '微软雅黑'";//设置字体大小和字体
        c.strokeStyle="#f1b913";//设置字体的颜色
        c.fillStyle="#f1b913";
        c.fillText("banana",100,100);

结果为:

第三丶设置文字基线的位置

        c.moveTo(50,100);
        c.lineTo(450,100);
        c.stroke();
        c.font="50px '微软雅黑'";//设置字体大小和字体
        c.strokeStyle="#f1b913";//设置字体的颜色
        c.textBaseline="middle";//设置文字的基线在中间,一般文字都是写在基线上
        //c.strokeText("banana",100,100);//绘画镂空字体
        c.fillStyle="#f1b913";
        c.fillText("banana",100,100);

 

结果为:

第四丶返回指定文本的宽度的对象

        c.moveTo(50,100);
        c.lineTo(450,100);
        c.stroke();
        c.font="50px '微软雅黑'";//设置字体大小和字体
        c.strokeStyle="#f1b913";//设置字体的颜色
        c.textBaseline="middle";//设置文字的基线在中间,一般文字都是写在基线上
        //c.strokeText("banana",100,100);//绘画镂空字体
        c.fillStyle="#f1b913";
        c.fillText("banana",100,100);
        var arr=c.measureText("banana");//返回banana文字的所占用的宽度
        console.log(arr);

结果为:

第五丶设置对齐方式

        var canvas=document.querySelector("#chen");//找到画布才能操作
        var c=canvas.getContext('2d');//定义画布为2d
        c.moveTo(50,100);
        c.lineTo(450,100);
        c.stroke();
        c.moveTo(100,0);
        c.lineTo(100,500);
        c.stroke();
        c.font="50px '微软雅黑'";//设置字体大小和字体
        c.strokeStyle="#f1b913";//设置字体的颜色
        //c.textBaseline="middle";//设置文字的基线在中间,一般文字都是写在基线上
        //c.strokeText("banana",100,100);//绘画镂空字体
        c.textAlign="left";//设置对齐方式
        c.fillStyle="#f1b913";
        c.fillText("banana",100,100);

 

left的结果:

 

right的结果:

 

center的结果:

 

start的结果:

end的结果: