2025-04-01 日报 Day143

今日的鸡汤

无论何时，无论遇到何事，都要保持年轻的心态。放下过往陈旧的观念，打破固有的认知经验，去探索新鲜的事物，把更多时间放在修炼自我上。

今日学习内容

1、JS 红皮书 P563-568 第十八章：动画与 Canvas 图形

今日笔记

1、绘制图像: 2D 绘图上下文内置支持操作图像。如果想把现有图像绘制到画布上，可以使用 drawImage()方法。这个方法可以接收 3 组不同的参数，并产生不同的结果。最简单的调用是传入一个 HTML 的元素，以及表示绘制目标的 x 和 y 坐标，结果是把图像绘制到指定位置。比如：

let image = document.images[0]; 
context.drawImage(image, 10, 10);

以上代码获取了文本中的第一个图像，然后在画布上的坐标(10, 10)处将它绘制了出来。绘制出来的图像与原来的图像一样大。如果想改变所绘制图像的大小，可以再传入另外两个参数：目标宽度和目标高度。这里的缩放只影响绘制的图像，不影响上下文的变换矩阵。比如下面的例子：

context.drawImage(image, 50, 10, 20, 30);

执行之后，图像会缩放到 20 像素宽、30 像素高。还可以只把图像绘制到上下文中的一个区域。此时，需要给 drawImage()提供 9 个参数：要绘制的图像、源图像 x 坐标、源图像 y 坐标、源图像宽度、源图像高度、目标区域 x 坐标、目标区域 y 坐标、目标区域宽度和目标区域高度。这个重载后的 drawImage()方法可以实现最大限度的控制，比如：

context.drawImage(image, 0, 10, 50, 50, 0, 100, 40, 60);

最终，原始图像中只有一部分会绘制到画布上。这一部分从(0, 10)开始，50 像素宽、50 像素高。而绘制到画布上时，会从(0, 100)开始，变成 40 像素宽、60 像素高。
第一个参数除了可以是 HTML 的元素，还可以是另一个元素，这样就会把另一个画布的内容绘制到当前画布上。
结合其他一些方法，drawImage()方法可以方便地实现常见的图像操作。操作的结果可以使用toDataURL()方法获取。不过有一种情况例外：如果绘制的图像来自其他域而非当前页面，则不能获取其数据。此时，调用 toDataURL()将抛出错误。
2、阴影: 2D 上下文可以根据以下属性的值自动为已有形状或路径生成阴影。
 shadowColor：CSS 颜色值，表示要绘制的阴影颜色，默认为黑色。
 shadowOffsetX：阴影相对于形状或路径的 x 坐标的偏移量，默认为 0。
 shadowOffsetY：阴影相对于形状或路径的 y 坐标的偏移量，默认为 0。
 shadowBlur：像素，表示阴影的模糊量。默认值为 0，表示不模糊。
这些属性都可以通过 context 对象读写。只要在绘制图形或路径前给这些属性设置好适当的值，阴影就会自动生成。比如：

let context = drawing.getContext("2d"); 
// 设置阴影
context.shadowOffsetX = 5; 
context.shadowOffsetY = 5; 
context.shadowBlur = 4; 
context.shadowColor = "rgba(0, 0, 0, 0.5)"; 
// 绘制红色矩形
context.fillStyle = "#ff0000"; 
context.fillRect(10, 10, 50, 50); 
// 绘制蓝色矩形
context.fillStyle = "rgba(0,0,255,1)"; 
context.fillRect(30, 30, 50, 50);

3、渐变: 渐变通过 CanvasGradient 的实例表示，在 2D 上下文中创建和修改都非常简单。要创建一个新的线性渐变，可以调用上下文的 createLinearGradient()方法。这个方法接收 4 个参数：起点 x 坐标、起点 y 坐标、终点 x 坐标和终点 y 坐标。调用之后，该方法会以指定大小创建一个新的 CanvasGradient对象并返回实例。
有了 gradient 对象后，接下来要使用 addColorStop()方法为渐变指定色标。这个方法接收两个参数：色标位置和 CSS 颜色字符串。色标位置通过 0～1 范围内的值表示，0 是第一种颜色，1 是最后一种颜色。比如：

let gradient = context.createLinearGradient(30, 30, 70, 70); 
gradient.addColorStop(0, "white"); 
gradient.addColorStop(1, "black");

这个 gradient 对象现在表示的就是在画布上从(30, 30)到(70, 70)绘制一个渐变。渐变的起点颜色为白色，终点颜色为黑色。可以把这个对象赋给 fillStyle 或 strokeStyle 属性，从而以渐变填充或描画绘制的图形：

// 绘制红色矩形
context.fillStyle = "#ff0000"; 
context.fillRect(10, 10, 50, 50); 
// 绘制渐变矩形
context.fillStyle = gradient; 
context.fillRect(30, 30, 50, 50);

3、图案: 图案是用于填充和描画图形的重复图像。要创建新图案，可以调用 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);

传给 createPattern()方法的第一个参数也可以是

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];

注意 只有在画布没有加载跨域内容时才可以获取图像数据。如果画布上绘制的是跨域内容，则尝试获取图像数据会导致 JavaScript 报错。
5、合成: 2D上下文中绘制的所有内容都会应用两个属性：globalAlpha 和 globalComposition Operation，其中，globalAlpha 属性是一个范围在 0~1 的值（包括 0 和 1），用于指定所有绘制内容的透明度，默认值为 0。
globalCompositionOperation 属性表示新绘制的形状如何与上下文中已有的形状融合。这个属性是一个字符串，可以取下列值。
 source-over：默认值，新图形绘制在原有图形上面。
 source-in：新图形只绘制出与原有图形重叠的部分，画布上其余部分全部透明。
 source-out：新图形只绘制出不与原有图形重叠的部分，画布上其余部分全部透明。
 source-atop：新图形只绘制出与原有图形重叠的部分，原有图形不受影响。
 destination-over：新图形绘制在原有图形下面，重叠部分只有原图形透明像素下的部分可见。
 destination-in：新图形绘制在原有图形下面，画布上只剩下二者重叠的部分，其余部分完全透明。
 destination-out：新图形与原有图形重叠的部分完全透明，原图形其余部分不受影响。
 destination-atop：新图形绘制在原有图形下面，原有图形与新图形不重叠的部分完全透明。
 lighter：新图形与原有图形重叠部分的像素值相加，使该部分变亮。
 copy：新图形将擦除并完全取代原有图形。
 xor：新图形与原有图形重叠部分的像素执行“异或”计算。