HTML5 Canvas – 组合|极客笔记

HTML5 Canvas – 组合

在HTML5 Canvas中，我们可以使用多种方法来组合不同的图形形状。这些方法包括：图形叠加、透明度、遮罩、混合模式等等。本文将会介绍这些组合方法并给出相应的代码示例。

图形叠加

图形叠加指的是在绘制两个形状时，其中一个形状会覆盖另一个形状。在Canvas中，我们可以使用globalCompositeOperation属性来设置图形叠加的方式。该属性有多种取值，每个取值代表不同的图形叠加方式。

例如，我们可以使用以下代码将一个圆形覆盖在一个矩形上：

// 绘制矩形
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 100);

// 设置叠加方式
ctx.globalCompositeOperation = 'source-over';

// 绘制圆形
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.fill();

以上代码中，我们先绘制了一个蓝色的矩形，然后设置叠加方式为source-over（默认叠加方式），最后绘制了一个红色的圆形。由于圆形在矩形之上，因此它会覆盖矩形。如果我们将叠加方式设置为destination-over，则矩形会覆盖圆形。

透明度

透明度可以让我们控制形状的不透明程度。在Canvas中，我们可以使用globalAlpha属性来设置透明度。该属性的取值范围是0（完全透明）到1（完全不透明）。

例如，我们可以使用以下代码将一个半透明的矩形绘制在画布上：

// 设置透明度
ctx.globalAlpha = 0.5;

// 绘制矩形
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 100);

以上代码中，我们先将透明度设置为0.5，然后绘制了一个蓝色的矩形。由于透明度为0.5，所以矩形是半透明的。

遮罩

遮罩可以让我们定义一个透明的图形形状，然后将该形状应用于一个或多个图形。在Canvas中，我们可以使用clip()方法来创建遮罩。该方法接受一个路径作为参数，然后将该路径作为遮罩应用到后续的绘制操作中。

例如，我们可以使用以下代码创建一个圆形遮罩，然后将该遮罩应用于一个矩形：

// 创建遮罩
ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.clip();

// 绘制矩形
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 100);

以上代码中，我们先创建了一个圆形遮罩，然后将该遮罩应用于后续的绘制操作中。最后，我们绘制了一个蓝色的矩形。由于遮罩的存在，矩形只会在圆形遮罩的范围内绘制。

混合模式

混合模式可以让我们通过改变颜色或像素值的组合方式来创建一些有趣的效果。在Canvas中，我们可以使用globalCompositeOperation属性来设置混合模式。该属性有多种取值，每个取值代表不同的混合模式。

例如，我们可以使用以下代码将一个蓝色的矩形应用混合模式，创造出一种类似于「正片叠底」效果的颜色：

// 绘制矩形
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 100);

// 设置混合模式
ctx.globalCompositeOperation = 'multiply';

// 绘制图形
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.fill();

以上代码中，我们先绘制了一个蓝色的矩形，然后将混合模式设置为multiply，最后绘制了一个红色的圆形。由于混合模式的存在，红色的圆形会跟蓝色的矩形相乘，创造出一种类似于「正片叠底」效果的颜色。