js中的canvas

1.canvas（画布）

<canvas>是HTML 5 新增的元素，可用于通过使用JavaScript中的脚本来绘制图形

2.获取上下文

<canvas>元素只是创造了一个固定大小的画布，要想在它上面绘制内容，我们需要找到它的渲染上下文

<canvas>元素有一个getContex（）方法，这个方法是用来获取渲染上下文和它的绘画功能

3. .画布api

    ctx.getContext("2d");
    ctx.width
    ctx.height

4.关于canvas的一些方法

    ctx.fillRect(x,y,w,h):填充矩形
    ctx.strokeRect(x,y，w，h):带边框的矩形
    ctx.clearRect(0,0,width,height):清除整个画布
        注意原点的位置
    ctx.fillStyle//填充形状的样式
    ctx.strokeStyle//描边的样式
    ctx.lineWidth//线的宽度
    ctx.lineCap：线帽
    ctx.moveTo(x,y):将画笔抬起点到x，y处
    ctx.lineTo(x,y):将画笔移到x，y处
    ctx.rect(x,y,w,h)
    ctx.arc(x,y,blur,star,end,boolean)//圆
    ctx.arcTo(x1,y1,x2,y2,r):2个坐标，一个半径
    ctx.beginpath():开始新路径
    ctx.closepath():闭合路径
    ctx.save()
        将画布保存当前状态
    ctx.restore()
        返回上一级状态
    ctx.translate(x,y):将原点按当前坐标轴位移x，y个单位
   文本垂直居中
 ctx.textBaseline = 'middle'; // top // bottom
  文本水平居中
  ctx.textAlign = 'center'; // left // right