十分钟实现灭霸打响指灰飞烟灭的效果，android路由器app

//处理canvas的代码

const ctx = canvas.getContext(‘2d’);

const imageData = ctx.getImageData(

0,

0,

canvas.width,

canvas.height

);

const pixelArr = imageData.data; //像素信息

图像信息被存储在一个Uint8ClampedArray（8位无符号整型固定数组）中，这个数组中的值为0到255的整数，按图片中像素从左到右从上到下的顺序，每4个数字表示一个像素信息，这4个数字分别表示rgba（r-红色，g-绿，b-蓝色，a-透明度）的四个值。 比如这样一个图片

image.png

它的像素信息即为

[0,0,0,255,255,255,255,255,255,0,0,255,0,255,0,255]

复制代码

1. 接下来是最关键的一步，创建多个同等长度的数组，填充上透明像素信息(数组中的值全是0即可)，然后将之前拿到的图像像素信息“随机”分布到这些数组中，这些数组就包含了原图像的部分内容,原教程里面用到了一个随机数生成的库chance</