本文主要是介绍canvas 图像合成，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
globalAlpha 属性设置或返回绘图的当前透明值（alpha 或 transparency）。
globalAlpha 属性值必须是介于 0.0（完全透明） 与 1.0（不透明） 之间的数字。
语法：context.globalAlpha=number;number介于0到1之间，0 完全透明，1 不透明
globalCompositeOperation
globalCompositeOperation 属性设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上（即所绘制的两个图像重叠式怎么处理）。
源图像 = 您打算放置到画布上的绘图。
目标图像 = 您已经放置在画布上的绘图。
语法：context.globalCompositeOperation="source-in";
参数说明：
<span style="font-family:Comic Sans MS;"><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title><script src="script/jquery-2.1.0.js"></script><script type="text/javascript">$(function () {var canvas = document.getElementById("sourceover");var context = canvas.getContext("2d");context.save();context.fillStyle = "blue";context.globalAlpha = 0.7;context.fillRect(0, 0, 100, 100);context.globalCompositeOperation = "source-atop";context.fillStyle = "red";context.fillRect(40, 40, 100, 100);context.restore();context.save();context.fillStyle = "blue";context.fillRect(150, 0, 100, 100);context.globalCompositeOperation = "source-over";context.fillStyle = "red";context.fillRect(190, 40, 100, 100);context.restore();});</script>
</head>
<body><canvas id="sourceover" width="600" height="600" style="border:1px solid blue;" ></canvas>
</body>
</html>
</span>
这篇关于canvas 图像合成的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
