canvas绘制形状

绘制矩形

不同于svg，canvas只支持两种形式的图形绘制：矩形和路径
canvas提供了三种方法绘制矩形
fillReact(x, y, width, height) 绘制一个填充的矩形
strokeReact(x, y, width, height) 绘制一个矩形边框
clearReact(x, y, width, height) 清除指定矩形区域，让清除部分完全透明
上面的方法有相同的参数，x,y指定了在canvas画布上所绘制的矩形的左上角的坐标，width和height设置了矩形的尺寸
例子：

draw (ctx) {
      ctx.fillRect (25, 25, 100, 100)
      ctx.clearRect (45, 45, 60, 60)
      ctx.strokeRect (50, 50, 50, 50)
    }

效果：

flllRect()函数绘制了一个边长100px的黑色矩形，clearRect函数擦除了一个60px60px的正方形，最后strokeRect()在清除区域内生成一个50px50px的正方形边框

绘制路径

方法：
fill() 填充当前绘图路径
stroke() 绘制已定义路径
beginPath() 开始一条路径，或重置当前路径
moveTo() 把路径移动到画布指定点，不创建线条
closePath() 创建从当前点回到起始点的路径
lineTo() 添加一个新点，然后在画布中创建从该点到最后指定点的线条
clip() 从原始画布剪切任意形状和尺寸的区域
quadraticCurveTo() 创建二次贝塞尔曲线
bezierCurveTo() 创建三次方贝塞尔曲线
arc() 创建弧/曲线（用于创建圆形或部分圆）
arcTo() 创建两切线之间的弧/曲线
isPointInPath() 如果指定的点位于当前路径中，则返回 true，否则返回 false
例子：绘制一个三角形

drawPath () {
      let draw = window.document.getElementById('cesium1')
      let ctx = draw.getContext('2d')
      //填充三角形
      ctx.beginPath()
      ctx.moveTo(75,50)
      ctx.lineTo(100,75)
      ctx.lineTo(100,25)
      ctx.fill()
      //描边三角形
      ctx.beginPath()
      ctx.moveTo(110,50)
      ctx.lineTo(135,75)
      ctx.lineTo(135,25)
      ctx.closePath()
      ctx.stroke()

    }

效果：

关键函数：lineTo(x,y)绘制一条从当前位置到指定x以及y位置的直线
这里从调用beginPath()函数准备绘制一个新的形状路径开始。然后使用moveTo()函数移动到目标位置上。然后下面，两条线段绘制后构成三角形的两条边。
注意：调用fill()函数时，所有没有闭合的形状都会自动闭合，所以不需要调用closePath()函数。但是调用stroke()时不会自动闭合

例子：绘制笑脸

drawFace () {
      let draw = window.document.getElementById('cesium2')
      let ctx = draw.getContext('2d')
      ctx.beginPath()
      ctx.arc(75, 75, 50, 0, Math.PI*2, true)
      ctx.moveTo(110, 75)
      ctx.arc(75, 75, 35, 0, Math.PI, false)  //口
      ctx.moveTo(65, 65)
      ctx.arc(60, 65, 5, 0, Math.PI*2, true)  //左眼
      ctx.moveTo(95, 65)
      ctx.arc(90, 65, 5, 0, Math.PI*2, true)  //右眼
      ctx.stroke()
    }

效果：

关键函数
moveTo(x,y)将笔触移动到指定的坐标x以及y上
arc(x,y,r,sAngle,eAngle,counterclockwise)
x:圆的中心的x坐标，y:圆的中心的y坐标，r:圆的半径，sAngle:开始角，eAngle:结束角,counterclockwise:false顺时针true逆时针
注意：请使用 stroke() 或 fill() 方法在画布上绘制实际的弧

二次贝塞尔曲线和三次贝塞尔曲线。。。