今天想要讨论的是如何实现上图的效果？

• 已有的条件是一个含有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多个，怎样能顺滑的实现动态效果，类似于让小方块动起来且循环播放？

最后

对于从来没有接触过网络安全的同学，我们帮你准备了详细的学习成长路线图。可以说是最科学最系统的学习路线，大家跟着这个大的方向学习准没问题。

同时每个成长路线对应的板块都有配套的视频提供：


当然除了有配套的视频，同时也为大家整理了各种文档和书籍资料&工具，并且已经帮大家分好类了。

因篇幅有限，仅展示部分资料，有需要的小伙伴，可以【点下方卡片】免费领取：