javascript基础学习系列四百七十一：合成图片、颜色等元素

2D 上下文中绘制的所有内容都会应用两个属性:globalAlpha 和 globalComposition Operation， 其中，globalAlpha 属性是一个范围在 0~1 的值(包括 0 和 1)，用于指定所有绘制内容的透明度，默

动画与 Canvas 图形

认值为 0。如果所有后来的绘制都需要使用同样的透明度，那么可以将 globalAlpha 设置为适当的值， 执行绘制，然后再把 globalAlpha 设置为 0。比如:

// 绘制红色矩形
context.fillStyle = "#ff0000"; context.fillRect(10, 10, 50, 50);
// 修改全局透明度
context.globalAlpha = 0.5;
// 绘制蓝色矩形
context.fillStyle = "rgba(0,0,255,1)"; context.fillRect(30, 30, 50, 50);
// 重置
context.globalAlpha = 0;

在这个例子中，蓝色矩形是绘制在红色矩形上面的。因为在绘制蓝色矩形前 globalAlpha 被设置 成了 0.5，所以蓝色矩形就变成半透明了，从而可以透过它看到下面的红色矩形。
globalCompositionOperation 属性表示新绘制的形状如何与上下文中已有的形状融合。这个属 性是一个字符串，可以取下列值。
 source-over:默认值，新图形绘制在原有图形上面。
 source-in:新图形只绘制出与原有图形重叠的部分，画布上其余部分全部透明。
 source-out:新图形只绘制出不与原有图形重叠的部分，画布上其余部分全部透明。
 source-atop:新图形只绘制出与原有图形重叠的部分，原有图形不受影响。
 destination-over:新图形绘制在原有图形下面，重叠部分只有原图形透明像素下的部分可见。  destination-in:新图形绘制在原有图形下面，画布上只剩下二者重叠的部分，其余部分完全
透明。
 destination-out:新图形与原有图形重叠的部分完全透明，原图形其余部分不受影响。
 destination-atop:新图形绘制在原有图形下面，原有图形与新图形不重叠的部分完全透明。
 lighter:新图形与原有图形重叠部分的像素值相加，使该部分变亮。
 copy:新图形将擦除并完全取代原有图形。
 xor:新图形与原有图形重叠部分的像素执行“异或”计算。 以上合成选项的含义很难用语言来表达清楚，只用黑白图像也体现不出所有合成的效果。下面来看
一个例子:

// 绘制红色矩形
context.fillStyle = "#ff0000";
context.fillRect(10, 10, 50, 50);
// 设置合成方式
context.globalCompositeOperation = "destination-over"; // 绘制蓝色矩形
context.fillStyle = "rgba(0,0,255,1)"; context.fillRect(30, 30, 50, 50);

虽然后绘制的蓝色矩形通常会出现在红色矩形上面，但将 globalCompositeOperation 属性的值 修改为"destination-over"意味着红色矩形会出现在蓝色矩形上面。
使用 globalCompositeOperation 属性时，一定记得要在不同浏览器上进行测试。不同浏览器在 实现这些选项时可能存在差异。这些操作在 Safari 和 Chrome 中仍然有些问题，可以参考 MDN 文档上的 CanvasRenderingContext2D.globalCompositeOperation，比较它们与 IE 或 Firefox 渲染的差异。

读者了解 OpenGL ES 2.0 的基本概念，并简单介绍 OpenGL ES 2.0 在 WebGL 中实现的部分。 要了解关于 OpenGL 的更多信息，可以访问 OpenGL 网站。另外，推荐一个 WebGL 教程网站:Learn WebGL。 18
WebGL 是画布的 3D 上下文。与其他 Web 技术不同，WebGL 不是 W3C 制定的标准，而是 Khronos Group 的标准。根据官网描述，“Khronos Group 是非营利性、会员资助的联盟，专注于多平台和设备下 并行计算、图形和动态媒体的无专利费开放标准”。Khronos Group 也制定了其他图形 API，包括作为浏 览器中 WebGL 基础的 OpenGL ES 2.0。
OpenGL 这种 3D 图形语言很复杂，本书不会涉及过多相关概念。不过，要使用 WebGL 最好熟悉 OpenGL ES 2.0，因为很多概念可以照搬过来。

WebGL

注意 定型数组是在WebGL中执行操作的重要数据结构。第6章中讨论了定型数组。 18.4.1 WebGL 上下文

let drawing = document.getElementById("drawing"); 21
   在完全支持的浏览器中，WebGL 2.0 上下文的名字叫"webgl2"，WebGL 1.0 上下文的名字叫 "webgl1"。如果浏览器不支持 WebGL，则尝试访问 WebGL 上下文会返回 null。在使用上下文之前， 应该先检测返回值是否存在:
 // 确保浏览器支持<canvas> if (drawing.getContext) {
  let gl = drawing.getContext("webgl");
  if (gl){
// 使用WebGL }
 }

这里把 WebGL context 对象命名为 gl。大多数 WebGL 应用和例子遵循这个约定，因为 OpenGL ES
2.0 方法和值通常以"gl"开头。这样可以让 JavaScript 代码看起来更接近 OpenGL 程序。 18.4.2 WebGL 基础
取得 WebGL 上下文后，就可以开始 3D 绘图了。如前所述，因为 WebGL 是 OpenGL ES 2.0 的 Web 版，所以本节讨论的概念实际上是 JavaScript 所实现的 OpenGL 概念。 25
可以在调用 getContext()取得 WebGL 上下文时指定一些选项。这些选项通过一个参数对象传入， 选项就是参数对象的一个或多个属性。
 alpha:布尔值，表示是否为上下文创建透明通道缓冲区，默认为 true。
 depth:布尔值，表示是否使用 16 位深缓冲区，默认为 true。
 stencil:布尔值，表示是否使用 8 位模板缓冲区，默认为 false。
 antialias:布尔值，表示是否使用默认机制执行抗锯齿操作，默认为 true。
 premultipliedAlpha:布尔值，表示绘图缓冲区是否预乘透明度值，默认为 true。 preserveDrawingBuffer:布尔值，表示绘图完成后是否保留绘图缓冲区，默认为 false。
建议在充分了解这个选项的作用后再自行修改，因为这可能会影响性能。

可以像下面这样传入 options 对象:

   let drawing = document.getElementById("drawing");
// 确保浏览器支持<canvas> if (drawing.getContext) {
      let gl = drawing.getContext("webgl", { alpha: false });
      if (gl) {
// 使用WebGL }
}

这些上下文选项大部分适合开发高级功能。多数情况下，默认值就可以满足要求。
如果调用 getContext()不能创建 WebGL 上下文，某些浏览器就会抛出错误。为此，最好把这个 方法调用包装在 try/catch 块中:

Insert IconMargin [download]let drawing = document.getElementById("drawing"), gl;
// 确保浏览器支持<canvas> if (drawing.getContext) {
try {
        gl = drawing.getContext("webgl");
} catch (ex) { // 什么也不做
}
if (gl) {
// 使用WebGL
      } else {
        alert("WebGL context could not be created.");
} }