canvas添加样式和颜色

色彩colors

给图形上色的属性：fillStyle,strokeStyle
fillStyle = color 设置图形的填充颜色
strokeStyle = color 设置图形的轮廓颜色
fillStyle示例
本例使用两层for循环绘制方格阵列，每个方格不同颜色，每一个方格都根据i,j变量产生唯一的RGB值。可以以此为基础，拓展绘制出各种各样的色板

drawColor () {
      let draw = window.document.getElementById('cesium3')
      let ctx = draw.getContext('2d')
      for (let i=0;i<6;i++) {
        for (let j=0;j<6;j++) {
          ctx.fillStyle = 'rgb('+Math.floor(255-42.5*i)+','+Math.floor(255-42.5*j)+',0)'
          ctx.fillRect(j*25,i*25,25,25)
        }
      }
    }

效果：

strokeStyle示例
这个例子与上面的类似，但是使用的strikeStyle来设置轮廓颜色，用arc来画圆

drawCircle () {
      let draw = window.document.getElementById('cesium4')
      let ctx = draw.getContext('2d')
      for (let i=0;i<6;i++) {
        for (let j=0;j<6;j++) {
          ctx.strokeStyle = 'rgb('+Math.floor(255-42.5*i)+','+Math.floor(255-42.5*j)+',0)'
          ctx.beginPath()
          ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true)
          ctx.stroke()
        }
      }
    }

效果：

透明度 Transparency

canvas不仅可以绘制实色图形，还可以绘制半透明图形。通过设置globalAlpha属性或者使用一个半透明颜色作为轮廓或者填充样式
globalAlpha = transparencyValue
这个属性影响到canvas里所有图形的透明度，有效值范围是0.0到1.0，该属性在需要绘制大量有相同透明度的形状时很高效，不过strokeStyle和fillStyle属性接受有透明度的颜色值，所以，下面这种写法也可行

ctx.strokeStyle = "rgba(255,0,0,0.5)";
ctx.fillStyle = "rgba(255,0,0,0.5)";

案例：

drawAlpha () {
      let draw = window.document.getElementById('cesium4')
      let ctx = draw.getContext('2d')
      ctx.fillStyle = '#FD0'
      ctx.fillRect(0,0,75,75)
      ctx.fillStyle = '#6C0'
      ctx.fillRect(75,0,75,75)
      ctx.fillStyle = '#09F'
      ctx.fillRect(0,75,75,75)
      ctx.fillStyle = '#F30'
      ctx.fillRect(75,75,75,75)
      ctx.fillStyle = '#FFF'
      // 设置透明度值
      ctx.globalAlpha = 0.2
      //画圆环
      for(let i = 0;i<7;i++) {
        ctx.beginPath()
        ctx.arc(75,75,12*i,0,Math.PI*2,true)
        ctx.fill()
      }
    }

效果：

线条样式

lineWidth = value 设置线条宽度
lineCap = type 设置线条末端样式
lineJoin = type 设置线条与线条间接合处的样式
miterLimit = value 限制两条线相交时交接处的最大长度，即斜接长度->线条交接处内角顶点到外角顶点的长度
getLineDash() 返回一个包含当前虚线样式，长度为非负偶数的数组
setLineDash(segments) 设置当前虚线样式
lineDashOffset = value 设置虚线样式的起始偏移量
案例

drawLine() {
      let ctx = document.getElementById("cesium5").getContext("2d");
      // let offset = 0;
      ctx.clearRect(0, 0, 150, 150);
      ctx.setLineDash([4, 2]);
      ctx.lineDashOffset = -this.offset;
      ctx.strokeRect(10, 10, 100, 100);
    },
march() {
    // console.log(this.offset++)
    this.offset++;
    if (this.offset > 16) {
      this.offset = 0;
    }
    this.drawLine();
    setTimeout(this.march, 20);
  }

效果：