画布颜色控制——填充/描边/擦除/渐变色

填充：

let canvas = document.getElementById('canvas')
if (canvas.getContext) {  //判断浏览器是否支持canvas
  //获得对绘图上下文的引用，平面图形传2d
  let context = canvas.getContext('2d')
  context.fillStyle = "#ff0000"
  context.fillRect(0, 0, 20, 20)  //此处画了一个矩形，填充的颜色是#ff0000颜色
  context.fillStyle = "#0000ff"
  context.fillRect(20, 20, 20, 20)  //此处画了一个矩形，填充的颜色是#0000ff颜色
  画的图的填充色是离他最近的fillStyle的颜色（即会覆盖，若不被覆盖则一直沿用）
}

描边：

context.strokeStyle = "#ff0000"
context.strokeRect(0, 0, 20, 20)

擦除

context.clearRect(10, 10, 20, 20)  这个应该算是矩形那一块，但是确实也涉及颜色，擦了就透明了，就没有这块了

https://www.cnblogs.com/sunli0205/p/6242684.html

let grad = context.createLinearGradient(0, 0, 300, 0)  //申明：(0, 0)到(300,0)的宽度

grad.addColorStop(0, "rgba(255,0,0,0.2)")
grad.addColorStop(0.5, "rgba(0,255,0,0.2)")
grad.addColorStop(1, "rgba(0,0,255,0.2)")

context.fillStyle = grad    //使用
context.fillRect(0, 0, 300, 100)