canvas

解决canvas浮于顶层的问题

canvas在使用时有一个问题就是它一直浮于顶层，当我们想要对被canvas覆盖的div进行操作时，一般的z-index是不起作用的，于是我们可以对canvas设置pointer-events:none样式。

<canvas id="myCanvas" style="pointer-events:none"></canvas>

画渐变色的线

var canvas = document.getElementById('myCanvas')
var colors = ['#07beed', '#03db4b', '#07beed', '#03db4b']
var ctx = canvas.getContext('2d')
ctx.moveTo(0, 0)
ctx.lineTo(1000, 1000)
var line = ctx.createLinearGradient(0, 300, 600, 900)
for (var i = 0; i < colors.length; i++) {
  line.addColorStop(i / colors.length, colors[i])
}
ctx.lineWidth = 2
ctx.strokeStyle = line
ctx.stroke()

监听canvas长宽变化

语法element.addEventListener(event, function, useCapture)

1. 参数event必填，表示监听的事件，例如 click, resize，mouseenter等
2. 参数 function必填，表示事件触发后调用的函数，可以是外部定义函数，也可以是匿名函数。不带参数
3. 参数 useCapture选填，填true或者false，用于描述事件是冒泡还是捕获触发，true表示捕获，默认false表示冒泡

mounted () {
  window.addEventListener('resize', () => {
    this.initCanvas()
  })
}