使用canvas绘图组合

最新推荐文章于 2025-08-23 20:28:56 发布

转载最新推荐文章于 2025-08-23 20:28:56 发布 · 90 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/3759656/blog/2247233

文章标签：

#python

2019独角兽企业重金招聘Python工程师标准>>>

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

转载于:https://my.oschina.net/u/3759656/blog/2247233