H5-12.15canvas标签应用（一）

渐变效果 - canvas支持的渐变效果包括线性渐变或射线渐变，并且支持颜色转折点

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

    var grd = context.createLinearGradient(x1,y1,x2,y2)
      x1,y1 - 基准线的起点坐标值
      x2,y2 - 基准线的终点坐标值
    var grd = context.createRadialGradient(x1,y1,r1,x2,y2,r2) 
       x1,y1 - 第一个基准圆的元素坐标值
       r1 - 第一个基准圆的半径
       x2,y2,r2同上
      返回一个渐变对象

2）给渐变对象指定渐变颜色值

     addColorStop(position,color)

     position - 指设置渐变颜色的位置(0-1)

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

      context.fillStyle = grd;

4） 绘制矩形

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

代码 效果图

Canvas-绘制文字

1、属性

   1）与css的font属性类似，接受值也完全相同
       font      
   2）水平对齐方式，值可以是left、right和center 
       textAlign
       //绘制文本的基准线
           context.beginPath();
           context.moveTo(200,0);
           context.lineTo(200,400);
           context.stroke();
   3）文本基线,设置垂直方向对齐,值可以是top、middle和bottom，alphabetic（默认值，字母基线）hanging（ 悬挂基线）
       textBaseline
   注意： 无论是水平方向对齐还是垂直方向对齐，都是基准线对齐，并不是文字对齐

2、方法

   1）在指定位置绘制空心文字，后面的x,y指的是左下角的坐标

       strokeText(text,x,y)
    
   2）在指定位置绘制实心文字

       fillText(text,x,y)

   3）返回指定文字的大小信息

       measureText()

canvas-设置阴影

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

    shadowColor

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

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

 4、为阴影生成模糊效果

    shadowBlur

代码 效果

三、canvas-创建路径-绘制矩形和圆形

1、标识方法

  开始创建路径，每次绘制新图形之前，都要先重新创建一个路径

    beginPath() 

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

    closePath()

2、设置方法

  设置矩形形状

    rect(x,y,width,height) 

    x和y - 矩形的左上角
    width/height - 矩形的宽和高

  设置圆形形状

    arc(x,y,radius,startAngle,endAngle,direction)

    x/y - 设置圆心的坐标值
    radius - 圆形的半径
    startAngle - 开始位置
    endAngle - 结束位置
    direction - 方向：默认值为false，表示顺时针

画了一个阴阳图：

代码 效果图

最后给大家分享一首音乐
http://music.163.com/#/song?id=34324628
才发现简书好像不支持iframe 和embed 只能放个链接在这了