Canvas之5绘制文本 - 个人技术博客

766 字

4 分钟

Canvas之5绘制文本

2017-06-09

CSS

Canvas

CSS

1.阴影
- cvs.shadowOffsetX//阴影的横向偏移量，默认值是0
- cvs.shadowOffsetY//阴影的纵向偏移量，默认值是0
- cvs.shadowColor//阴影的颜色
- cvs.shadowBlur//阴影的模糊范围（值越大越模糊）

案例

1
  function draw1(){
2
    cvs.shadowColor='#000fff';//设置阴影颜色
3
    cvs.shadowOffsetX=30;//设置阴影的横向偏移量30px
4
    cvs.shadowOffsetY=20;//设置阴影的纵向偏移量20px
5
    cvs.shadowBlur=20;//设置阴影的模糊范围20px
6
    cvs.fillStyle='#449fdb';//设置填充的样式为颜色填充
7
    cvs.fillRect(50,50,100,100);//设置填充矩形 左上角坐标50,50 宽100px 高100px
8
  }
9
  draw1();

2.绘制文本
- 设置字体样式 cvs.font=‘字体大小font-size 字体样式font-family’
- 水平对齐方式 cvs.textAlign(start,end,right,center);
- 垂直对齐方式 cvs.textBaseline=”
- 属性值,middle,hangle,bottom,alphabetic,ideographic
- 计算文本长度
  - var text=‘dfbzbh’
  - console.log(cvs.measureText(text));//width<40>.453125
- 填充文字
  - cvs.fillText(text,x,y,maxWidth);
  - 1. text<文本内容>
  - 1. x<文字起始点的横坐标>
  - 1. y<文字起始点的纵坐标>
- 绘制文字轮廓
  - cvs.strokeText(text,x,y,maxWidth);
  - 1. text<文本内容>
  - 1. x<文字起始点的横坐标>
  - 1. y<文字起始点的纵坐标>
案例1

1
function draw1(){
2
    cvs.shadowColor='#000fff';//设置阴影颜色
3
    cvs.shadowOffsetX=30;//设置阴影的横向偏移量30px
4
    cvs.shadowOffsetY=20;//设置阴影的纵向偏移量20px
5
    cvs.shadowBlur=20;//设置阴影的模糊范围20px
6
    cvs.fillStyle='#449fdb';//设置填充的样式为颜色填充
7
    cvs.fillRect(50,50,100,100);
8
    //设置填充矩形 左上角坐标50,50 宽100px 高100px
9
  }
10
  draw1();

案例2

1
  function draw2(){
2
    var text='hellow word';//设置文本内容
3
    cvs.fillStyle='yellow';//设置填充样式颜色
4
    cvs.font='40px verdana';//设置字体样式
5
    cvs.textAlign='start';//设置字体的水平对齐方式
6
    cvs.textBaseline='top';//设置字体的垂直对齐方式
7
    cvs.fillText(text,10,10);
8
    //设置填充文字 文本内容text 文本起始点坐标10,10
9
    var length=cvs.measureText(text);
10
    //获取文本宽度(长度)length
11
    console.dir(length);
12
    //TextMetrics-->width:241.171875
13
    //==>length.width字体的宽度
14
    cvs.fillText("字体长度为"+length.width,10,60);
15
    //设置填充文字(通过字符串拼接方式) 文本起始点坐标10,60
16
  }
17
  draw2();

案例3<文本线性渐变>

1
function draw3(){
2
    var CLG=cvs.createLinearGradient(0,0,300,100);
3
    //创建一个线性渐变 渐变开始的坐标0,0 渐变结束的坐标300,100
4
    CLG.addColorStop(0,'skyblue');//设置渐变的偏移量0% 天空蓝
5
    CLG.addColorStop(0.25,'plum');//设置渐变的偏移量25% 紫色
6
    CLG.addColorStop(0.5,'lightblue');//设置渐变的偏移量50% 蓝
7
    CLG.addColorStop(0.75,'skyblue');//设置渐变的偏移量75% 天空蓝
8
    CLG.addColorStop(1,'plum');//设置渐变的偏移量100% 紫色
9
    var text='hellow word';//设置文本内容
10
    cvs.fillStyle=CLG;//设置填充样式是线性渐变
11
    cvs.shadowOffsetX=5;//设置阴影的横向偏移量5px
12
    cvs.shadowOffsetY=4;//设置阴影的纵向偏移量4px
13
    cvs.shadowColor='#ffb6c1';//设置阴影的颜色
14
    cvs.shadowBlur=5;//设置阴影的模糊度
15
    cvs.font='40px cursive';//设置字体样式
16
    cvs.textAlign='top';//设置字体的水平对齐方式
17
    cvs.fillText(text,50,150);
18
    //设置填充文字text 文本起始点坐标50,150
19
    var width=cvs.measureText(text).width;//获取文本宽度(长度)length
20
    cvs.fillText("字体长度为："+width,10,200);
21
    //设置填充文字(通过字符串拼接方式) 文本起始点坐标10,200
22

23
  }
24
  draw3();

案例4<文本径向渐变>

1
  function draw4(){
2
    var CRG=cvs.createLinearGradient(0,0,600,0,0,20);
3
    //创建一个径向渐变 渐变开始的坐标0,0 开始渐变的半径600px 渐变结束的坐标0,0 渐变结束的半径20px
4
    CRG.addColorStop(0,'pink');
5
    CRG.addColorStop(0.25,'skyblue');
6
    CRG.addColorStop(0.5,'yellow');
7
    CRG.addColorStop(0.75,'plum');
8
    CRG.addColorStop(1,'skyblue');
9
     var text='I WANT EAT';
10
     cvs.fillStyle=CRG;//设置填充样式是径向渐变
11
     cvs.font='80px simsun';//设置字体样式
12
       cvs.textAlign='start';//设置文本横向对齐方式
13
     cvs.textBaseline='top';//设置文本纵向对齐方式
14
     cvs.shadowColor='lightblue';//设置阴影颜色
15
     cvs.shadowBlur=10;//设置阴影的模糊范围10px
16
     cvs.fillText(text,10,10);//设置填充文字text 文本起始点坐标10,10
17
  }
18
  draw4();