今天想要讨论的是如何实现上图的效果？
- 已有的条件是一个含有200个十六进制的颜色数组。
思考分析：
1、首先可以确定的是这些色块应该是由Canvas画在一块画布上的，因为如果是由div一个个渲染，那么渲染开销就会很大。
2、当我们没有一点Canvas基础时，首先看到的是这些不同的色块都是由一个个规则的正方形组成。所以，这时我们也就有了方向，那就是如何使用Canvas画正方形？
3、通过简单了解，canvas标签中可以通过width和height设置画布大小，给画布设置id属性，以便于获取指定的画布dom元素。然后，使用getContext()方法获取对绘图上下文的引用。
Canvas知识点铺垫
// 如何画一个有颜色有边框矩形
<canvas id="draw" class="draw" width="1065" height="205"></canvas>
let drawing = drwaing = document.getElementById('draw')
// 确保浏览器支持Canvas
if (drwaing.getContext) {// 获取2D上下文图像let context = drwaing.getContext('2d');// 给矩形填充颜色context.fillStyle = 'red';// 确定矩形的位置以及大小context.fillRect(10, 10, 20, 20); // 前两个参数为该举行的位置坐标，后两个参数为矩形的宽高// 接下来绘制矩形的边框context.lineWidth = '2'; // 边框线的宽度为2context.strokeStyle = 'rgba(0, 0, 0, 0.5)' // 边框的颜色context.strokeRect(10, 10, 20, 20); //边框的大小以及位置（与矩形位置大小相同）
}
// 此时一个宽高20黑框红色的小正方形在坐标(10, 10)的位置就绘制好了
分析图片中的规律：
1、轻易的发现这个画布是由40 * 5个小方块组成的，那么就可以将其想象成为一个二维数组，这个二维数据包括五个长度为40的数组, 如下图（使用0填充了数组）。
2、那么，只需要确定每一个小方块的坐标即可，那么可以自己在纸上画一画来找出规律（当然，我的小方块大小为20 * 20）。
3、最后，可以通过两个for循环构建出这200个小方块并给出位置，小方块的位置已经有了明确的思路，现在就要处理颜色，已知的条件是颜色数组中一次性包含200个16进制的颜色。这里不难想到，将这个数组改为一个与前者相同的二维数组即可。
核心代码
// 打成二维数组的方法
// arr: 目标数组
// num: 二维数组中每个数组中含有的元素数量
fn (arr, num) {let newArr = []let copyArr = JSON.parse(JSON.stringify(arr))const total = Math.ceil(arr.length / num)for (let i = 0; i < total; i++) {let a = copyArr.splice(0, num)newArr.push(a)}return newArr
},
// 绘制各个小方块的位置以及填充颜色
if (drwaing.getContext) { // colorData: 含有200个颜色的颜色数组let colorData = this.fn(colorData, 40); // 利用上面的函数打为二维数组// 利用for循环构建二维数组并赋值for (let i = 0; i < 5; i++) {for (let j = 0; j < 40; j++) {let context = drwaing.getContext('2d')context.fillStyle = colorData[i][j]context.fillRect(j * 25 + 25, i * 25 + 25, 20, 20)context.lineWidth = '2'context.strokeStyle = 'rgba(0, 0, 0, 0.5)'context.strokeRect(j * 25 + 25, i * 25 + 25, 20, 20)}}}
总结：
整个代码实现过程很容易，代码简单，简单记录一下遇到没碰到过问题的思考及实现过程。那么还留下一个小问题，如果这个colorData这种颜色数组存在n多个，怎样能顺滑的实现动态效果，类似于让小方块动起来且循环播放？
最后
最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。
有需要的小伙伴，可以点击下方卡片领取，无偿分享