HTML5 Canvas合成

2024-03-22 12:56:40

将透明度与globalCompositeOperation属性结合使用，可以用来控制图形和文本在画布上绘制的方式，合成globalCompositeOperation允许的值有：
copy、destination-atop、destination-in、destination-in、destination-over、destination-out、lighter、source-atop、source-in、source-out、source-over、source-over、xor
实例代码选自《HTML5权威指南》

<!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>