javascript七基础学习系列一千四百六十六：图案

图案是用于填充和描画图形的重复图像。要创建新图案，可以调用createPattern()方法并传入
两个参数：一个HTML 元素和一个表示该如何重复图像的字符串。第二个参数的值与CSS 的
background-repeat 属性是一样的，包括"repeat"、“repeat-x”、“repeat-y"和"no-repeat”。
比如：
let image = document.images[0],
pattern = context.createPattern(image, “repeat”);
// 绘制矩形
context.fillStyle = pattern;
context.fillRect(10, 10, 150, 150);
记住，跟渐变一样，图案的起点实际上是画布的原点(0, 0)。将填充样式设置为图案，表示在指定位
置而不是开始绘制的位置显示图案。
传给createPattern()方法的第一个参数也可以是元素或者另一个元素。
图像数据
2D 上下文中比较强大的一种能力是可以使用getImageData()方法获取原始图像数据。这个方法
接收4 个参数：要取得数据中第一个像素的左上角坐标和要取得的像素宽度及高度。例如，要从(10, 5)
开始取得50 像素宽、50 像素高的区域对应的数据，可以这样写：
let imageData = context.getImageData(10, 5, 50, 50);
返回的对象是一个ImageData 的实例。每个ImageData 对象都包含3 个属性：width、height
和data，其中，data 属性是包含图像的原始像素信息的数组。每个像素在data 数组中都由4 个值表
示，分别代表红、绿、蓝和透明度值。换句话说，第一个像素的信息包含在第0 到第3 个值中，比如：
let data = imageData.data,
red = data[0],
green = data[1],
blue = data[2],
alpha = data[3];
这个数组中的每个值都在0~255 范围内（包括0 和255）。对原始图像数据进行访问可以更灵活地操
作图像。例如，通过更改图像数据可以创建一个简单的灰阶过滤器：
let drawing = document.getElementById(“drawing”);
// 确保浏览器支持
if (drawing.getContext) {
let context = drawing.getContext(“2d”),
image = document.images[0],
imageData, data,
i, len, average,
red, green, blue, alpha;
// 绘制图像
context.drawImage(image, 0, 0);
// 取得图像数据
imageData = context.getImageData(0, 0, image.width, image.height);
data = imageData.data;
for (i=0, len=data.length; i < len; i+=4) {
red = data[i];
green = data[i+1];
blue = data[i+2];
alpha = data[i+3];
// 取得RGB 平均值
average = Math.floor((red + green + blue) / 3);
// 设置颜色，不管透明度
data[i] = average;
data[i+1] = average;
data[i+2] = average;
}
// 将修改后的数据写回ImageData 并应用到画布上显示出来
imageData.data = data;
context.putImageData(imageData, 0, 0);
}
这个例子首先在画布上绘制了一个图像，然后又取得了其图像数据。for 循环遍历了图像数据中的
每个像素，注意每次循环都要给i 加上4。每次循环中取得红、绿、蓝的颜色值，计算出它们的平均值。
然后再把原来的值修改为这个平均值，实际上相当于过滤掉了颜色信息，只留下类似亮度的灰度信息。
之后将data 数组重写回imageData 对象。最后调用putImageData()方法，把图像数据再绘制到画
布上。结果就得到了原始图像的黑白版。
当然，灰阶过滤只是基于原始像素值可以实现的其中一种操作。要了解基于原始图像数据还可以实
现哪些操作，可以参考Ilmari Heikkinen 的文章“Making Image Filters with Canvas”。