H5 Canvas 中 globalCompositeOperation 的理解和应用

H5 Canvas 是 HTML5 中的一个元素，它拥有丰富的 API，允许开发人员通过 JS 在网页上绘制图形、动画和复杂的视觉效果-比如笔者之前的文章引力粒子特效 - 归为尘埃。

本文，我们来讲讲 globalCompositeOperation 这个重要的属性。

globalCompositeOperaton 是什么

globalCompositeOperation 顾名思义，为合成操作，用于设置新绘制的图形如何和已有图形进行合成。 这个属性接受一个字符串值，该值决定了合成的方式。

context.globalCompositeOperation = "source-over" 是其默认值，表示新图形会覆盖在已有图形之上。

合成操作方式

合成的方式有以下，我们结合案例，逐一来体验。

假设我们有素材如下：

该素材的尺寸为 548px * 452px，包含透明的地方和红色不透明的地方。该图片作为已有图片。

笔者头像作为新图，尺寸为 90px * 90px。

登录后复制

<canvas id="canvas" width="548" height="452"></canvas>

• 1.

登录后复制