Canvas 跟随鼠标移动的炫彩小球

1. 初始化Canvas画布

1.1 设置画布参数

<canvas id="mycanvas" width="600" height="600"></canvas>

设置id选择器，并给画布的宽高赋值；

注意：宽高必须在行内里面设置，不能设置在css样式中，否则会被拉伸。

1.2 获取canvas元素

    var canvas = document.querySelector('#mycanvas')
    var ctx = canvas.getContext('2d')

通过id选择器在script标签中获取dom元素canvas, 并且对画布进行2d设置，第二行为固定写法。

2. 封装生成随机颜色函数

    function getRandom() {
      var allType = '0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f'
      var allTypeArr = allType.split(",")
      var color = "#"
      for (var i=0;i < 6; i++) {
        var random = parseInt(Math.random() * allTypeArr.length)
        color += allTypeArr[random]
      }
      return color
    }

首先生成一个包含所有16进制元素的字符串，通过数组的split()方法以逗号为分割点将字符串分隔成为一个数组。

初始化color为#号开头，以进行后面颜色的拼接。

颜色的16进制是由6位数构成的，所以我们写了一个6次的循环，每次得到的数字为随机的数组里面的索引， 通过这个随机的索引值，我们可以获得列表里面的随机值，分别拼接到color上。

最后的color值的就为 #f09b2 这样的格式，并且在最后把这个color给返回出去，供外界接收。

3. 小球构造函数的封装

    function Ball(x,y,r) {
      this.x = x
      this.y = y
      this.r = r
      this.color = getRandom()
      this.dx = parseInt(Math.random() * 10) - 5
      this.dy = parseInt(Math.random() * 10) - 5