canvas渐变效果，绘制文字和图形-12.15

2016-12-16 本文已影响0人 50153465fcd8

渐变效果

1.在画布上创建一个渐变对象

var grd = context.createLinearGradient(x1,y1,x2,y2)

//线性渐变，方向为起始点（x1,y1）与结束点（x2,y2）两点连线的方向

var grd = context.createRadialGradient(x1,y1,r1,x2,y2,r2)

//径向渐变，方向为半径为r1的起始圆（x1,y1）与半径为r2的结束圆（x2,y2）的两条外切线方向

2.给渐变对象指定渐变颜色

addColorStop(position,color)//position:指定渐变颜色的位置（0-1）

3.将渐变对象作为画布对象的颜色

context.fillStyle = grd;

4.绘制矩形

context.fillRect(100,100,400,400)

代码示例：

 <body>
    <canvas id="canvas" width="400px" height="400px"></canvas>
</body>
<script type="text/javascript">

    var context = document.getElementById("canvas").canvas.getContext("2d");
    //1.创建扇形渐变对象
    var grd = context.createRadialGradient(140,140,40,200,200,150);
    //2.给渐变对象指定渐变颜色
    grd.addColorStop(0,"black");
    grd.addColorStop(0.5,"green");
    grd.addColorStop(1,"gray");
    //3.将渐变对象作为画布对象的颜色
    context.fillStyle = grd;
    //4.绘制矩形
    context.fillRect(0,0,400,400);
</script>

绘制文字

1.属性

1）与css的font属性类似

    context.font = "blod 斜体 大小 微软雅黑";

2）对齐方式

无论是水平方向对齐还是垂直方向对齐，都是基准线对齐，并不是文字对齐

水平对齐

//绘制文本的基线
context.beginPath();
context.moveTo(200,0);
context.lineTo(200,400);
context.stroke()

textAlign = left/center/right
left：基线在文本左侧
center：基线在文本中间
right：基线在文本右侧

垂直对其

//绘制文本的基线
context.beginPath();
context.moveTo(0,200);
context.lineTo(400,200);
context.stroke();

textBaseline= top/middle/bottom/alphabetic/hanging
top：基线在文本上面
middle：基线在文本中间
bottom：基线在文本下面
alphabetical：字母基线（默认值）
hanging：悬挂基线

2.方法

绘制空心文字

    strokeText("text",x,y)//x,y是文字的左下角的坐标

绘制实心文字
```
    fillText("text",x,y)
```
返回指定文字的大小信息
```
    measureText（"指定文本"）
```

设置阴影

1.使用CSS语法声明阴影颜色

      context.shadowColor = "red";

2.接受一个数字，确定对象阴影的水平投射距离

      context.shadowOffsetX = 5;

3.接受一个数字，确定对象阴影的垂直投射距离

      context.shadowOffsetY = 4;

4.为阴影生成模糊效果

      context.shadowBlur = 12;

绘制矩形和圆形

1.创建路径和绘制同时执行

    context.fillRect(0,0,100,100);

2.使用路径创建图形

每次绘制新图形之前，都要先重新创建一个路径
```
      beginPath() 
```

结束创建路径，主要用于让线条闭合

      closePath()

绘制矩形

  context.beginPath();
  context.rect(x,y,width,height);
  //x和y - 矩形的左上角
  //width/height - 矩形的宽和高
  context.fillStyle = "yellow";
   context.fill();

绘制圆形

    context.beginPath();
    context.arc(x,y,radius,startAngle,endAngle,direction);
    //x/y - 设置圆心的坐标值
    //radius - 圆形的半径
    //startAngle - 开始位置 0 - 2*Math.PI
    //endAngle - 结束位置  0 - 2*Math.PI
    //direction - 方向：默认值为false，表示顺时针
    context.closePath();
    context.stroke();

canvas渐变效果，绘制文字和图形-12.15

渐变效果

绘制文字

设置阴影

绘制矩形和圆形

猜你喜欢

热点阅读