canvas基础知识点（一）

1. 给canvas设置宽高：
   canvas标签的宽高默认是300*150,是一个行内块元素
   可以在canvas标签上通过width，height来设置
   可以在js中给dom对象设置：

     mycanvas.width = 500
     mycanvas.height = 500
   
   

   注意：不要通过css来调整canvas的宽高,导致内部的canvas画布被拉伸，图形变形

   1. 获取画笔工具：
      canvas绘图都是通过canvas标签的画笔来进行的

      var ctx = canvas.getContext('2d')

      注意，不要写成getContent，里面传入的参数目前也只有2d这一种情况

3、 描边和填充

canvas绘制图形都是绘制的路径，看不见摸不着的一种东西，需要进行描边或填充之后才能看到真正的图形
如果绘制图形的路径在绘制完成后没有闭合，继续绘制路径的时候会首尾相连
在填充的时候如果路径依然没有闭合，会将路径的闭合区域填充

ctx.fill()//填充
ctx.stroke()//描边

可以调整ctx.strokeStyle,ctx.fillStyle属性来更改填充，描边的颜色，值为颜色值（rgb,rgba,word,16进制）

1. 绘制矩形
   ctx.rect(x,y,w,h)
   canvas的坐标系起点是左上角，x轴向右正方向，y轴向下正方向
   x,y代表的是矩形起点（左上角）的位置，w,h就是宽高
   可以使用strokeRect,fillRect方法直接绘制一个填充、描边的矩形

1. 清楚矩形区域以及动画原理
   ctx.clearRect(x,y,w,h)可以清除某一个矩形区域的图形
   canvas实现动画的原理就是不断的绘制和擦除来实现

      var ctx = canvas.getContext("2d")
      let x=0,y=0;
      ctx.fillRect(x,y,50,50)    
      setInterval(function () {
          //绘制新的图形前擦掉之前的
          ctx.clearRect(0,0,canvas.width,canvas.height)
          x++;y++;
          //不断绘制新图形
          ctx.fillRect(x,y,50,50)
      },30)
   

来源：https://www.cnblogs.com/homehtml/p/12039701.html