HTML5 Canvas synthesis

The transparency and globalCompositeOperationproperty combination, can be used to control rendering of graphics and text on the canvas, synthetic globalCompositeOperationAllowed values
copyare: destination-atop, destination-in, destination-in, destination-over, destination-out, lighter, source-atop, source-in, source-out, source-over, source-over, , xor
example code is selected, "the HTML5 Definitive Guide"

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		select {
			border: #eee solid 0.5px;
			background-color: transparent;
		}

		canvas {
			border: #eee solid 1px;
		}
	</style>
</head>
<body>
<canvas id="canvas" width="300" height="120">
	
</canvas>

<label>Composition Value</label>
<select id="list">
	<option>copy</option>
	<option>destination-atop</option>
	<option>destination-in</option>
	<option>destination-over</option>
	<option>destination-out</option>
	<option>lighter</option>
	<option>source-atop</option>
	<option>source-in</option>
	<option>source-out</option>
	<option>source-over</option>
	<option>xor</option>
</select>
<script type="text/javascript">
	var ctx = document.getElementById("canvas").getContext("2d");
	ctx.fillStyle = "lightgrey";
	ctx.strokeStyle = "black";
	ctx.lineWidth = 3;

	var compVal = "copy";

	document.getElementById("list").onchange = function(e) {
		compVal = e.target.value;
		draw();
	}

	draw();

	function draw() {
		ctx.clearRect(0, 0, 300, 120);
		ctx.globAlpha = 1.0;
		ctx.font = "100px sans-serif";
		ctx.fillText("Hello", 10, 100);
		ctx.strokeText("Hello", 10, 100);

		ctx.globalCompositeOperation = compVal;

		ctx.fillStyle = "red";
		ctx.globalAlpha = 0.5;
		ctx.fillRect(100, 10, 150, 100);
	}
</script>
</body>
</html>

Code default effect

copy When the effect of the sources drawn on target, ignoring all transparency settings, similar to the effect of direct coverage, is about to
destination-atop Use the target image instead of the original image, it retains transparency and superimposed upon the visible part
destination-inSource and destination images that are not transparent at the display of the source image, source image application transparency and Hellothe application of transparency to show only the image where the target intersection
destination-over 来源图像覆盖在目标图像上，即Hello覆盖在红色矩形上
lighter来源图像与目标图像的总和，可以看出来源图像和目标图像都有了透明效果
source-atop 目标图像图像颜色叠加到源图像Hello上
source-in 来源图像与目标图像叠加处显示来源图像和目标图像色彩
source-out 来源图像与目标图像叠加部分，来源图像Hello不透明处使其透明显示，其他位置显示目标图像
source-over 目标图像个叠加到来源图像上
xor 叠加出图像执行异或运算

原文:大专栏 HTML5 Canvas合成

HTML5 Canvas synthesis

Guess you like