使用canvas繪圖組合

時間 2019-11-24

標籤使用 canvas 繪圖組合简体版

原文原文鏈接

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		canvas{
			border:1px solid red;
		}
	</style>
	<script>
		window.onload = function(){
			var canvas = document.getElementById('canvas');
			var context = canvas.getContext('2d');
			context.fillStyle = 'red';
			context.fillRect(0,0,200,200);
			// 設置組合類型
			// 新圖形在上，默認
			// context.globalCompositeOperation = 'source-over';
			// 舊圖形在上
			// context.globalCompositeOperation = 'destination-over';
			// 新圖形的重疊部分
			// context.globalCompositeOperation = 'source-in';
			// 舊圖形重疊部分
			// context.globalCompositeOperation = 'destination-in';
			// 新圖形不重疊部分
			// context.globalCompositeOperation = 'source-out';
			// 就圖形不重疊部分
			// context.globalCompositeOperation = 'destination-out';
			// 新圖形重疊部分和舊圖形的不重疊部分
			// context.globalCompositeOperation = 'source-atop';
			// 舊圖形的重疊部分和新圖形的不重疊部分
			// context.globalCompositeOperation = 'destination-atop';
			// 都顯示，重疊部分作加色處理
			// context.globalCompositeOperation = 'lighter';
			// 都顯示，重疊部分去掉
			// context.globalCompositeOperation = 'xor';
			// 新圖形
			context.globalCompositeOperation = 'copy';
			// 繪製圓
			context.beginPath();
			context.arc(200,200,100,0,Math.PI*2);
			context.closePath();
			context.fillStyle = 'blue';
			context.fill();
		}
	</script>
</head>
<body>
	<canvas id="canvas" width="400px" height="400px"></canvas>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。