# js canvas
- ## canvas api
  - 获取canvas元素：
    ```javascript
    let canvas=document.querySelector(canvas_name)
    ```
  - 获取canvas上下文：
    ```javascript
    // 获取2d上下文，之后可以通过ctx操作canvas元素
    let ctx=canvas.getContext("2d")
    ```
  - 填充矩形：
    ```javascript
    ctx.fillStyle='rgb(255,0,0)'
    ctx.fillRect(0,0,100,100)
    ```
    - 如果画了多个图形，那么按照画的顺序，后画的元素将会覆盖在先画的图形之上
    - 通过为ctx.fillStyle指定rgba，可以画半透明的元素，alpha的值为0～1,值越接近0越透明
  - 只画矩形轮廓
    ```javascript
    ctx.strokeStyle='rgb(255,0,0)';
    ctx.strokeRect(x,y,width,height);

    // 默认情况下轮廓宽度是1px，但是可以通过ctx.lienWidth来调整宽度
    ctx.lineWidth=5
    ```
  - 画Path：画Path主要可以通过如下api
    - ctx.beginPath：在当前所处的位置开始path
    - ctx.moveTo：移动当前位置到指定位置，而不记录移动的线条
    - ctx.lineTo：在path中记录线条
    - ctx.fill：通过先前的path创建fill图形
    - ctx.stroke：通过先前的path创建stroke图形
  - 画圆形：通过ctx.arc画圆形
    ```javascript
    // arc有6个参数，分别如下
    //  1～2： 圆心的x和y坐标
    //  3：半径的像素
    //  4～5：开始的角度和结束的角度（弧度制）
    //  6：是否按逆时针画
    // arc的0度是水平向右
    ctx.arc(100,100,100,0,2*Math.Pi,true)
    // 默认情况下0度位于水平向右，但是角度增长默认是顺时针方向，在没有指定第六个参数时其默认也是顺时针方向绘制（第六个参数为false）。但是可以指定第六个参数为true，指定为true会逆时针方向绘制
    // 当path不是封闭图形时，调用fill时会将开始位置和结束位置连接后填充
    ```
  - 在canvas中绘制text文本
    - 可以通过ctx.fillText来绘制填充文本
    - 可以通过ctx.strokeText来绘制文本边框
    - 可以通过ctx.font来修改字体的种类和大小
    ```javascript
    // fillText接受3个参数
    //  1.想要绘制的文本
    //  2.绘制文本的开始x位置
    //  3.绘制文本的开始y位置
    //  绘制文本的开始位置是左下角位置，并不是左上角
    ctx.fillText(str,x,y)
    ```
  - 在canvas中绘制图片
    - 可以通过ctx.drawImage在canvas中绘制图片，其接受如下参数：
      - 一个image对象的引用
      - 想要绘制的图片的裁剪部分左上角的x坐标和y坐标
      - 想要绘制的图片的裁剪部分的width和height
      - 想要将裁剪部分绘制在canvas上的位置，相对于（0,0）的x和y坐标
      - 指定想要绘制裁剪部分的width和height，可以与裁剪部分的width和height相同，也可以将裁剪部分resize
    ```javascript
    ctx.drawImage(image,image_x,image_y,image_width,image_height,0,0,image_x,image_y)
    ```
  - 在canvas中创建动画：
    - 常用的api：
      - ctx.translate: 移动canvas和其origin point，水平方向移动x像素，垂直方向移动y单位
      - ctx.rotate：旋转整个canvas，以origin point为中心
    - 创建动画的api：
      - window.requestAnimationFrame(func)来令动画以特定的帧率刷新（60帧/s）
      - 通过向requestAnimationFrame来传递一个函数刷新canvas，并且func中继续调用requestAnimationFrame来获取下一帧
      - 当不想继续动画时，可以不再在func中调用requestAnimationFrame，或者可以调用cancelAnimationFrame来停止获取下一帧动画