canvas裁剪clip()函数

最新推荐文章于 2024-06-16 18:45:25 发布

kongjunchao159

最新推荐文章于 2024-06-16 18:45:25 发布

阅读量4.9k

点赞数

分类专栏： canvas

本文链接：https://blog.csdn.net/kongjunchao159/article/details/52152403

版权

canvas 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

在canvas中，可以使用clip()函数裁剪区域，设定裁剪区域后，只有在区域内的图像才能显示，其余部分会被屏蔽掉

未使用裁剪绘制一个圆

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		*{margin:0; padding:0;}
		html, body{width:100%; height:100%; overflow:hidden; background-color:#AFAFAF;}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<script>
		var canvas = document.getElementById('canvas'),
			context = canvas.getContext('2d');
		canvas.width = document.body.clientWidth;
		canvas.height = document.body.clientHeight;
		context.lineWidth = 3;
		context.strokeStyle = 'red';
		context.beginPath();
		context.arc(200, 200, 100, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);
		context.stroke();
		context.closePath();
	</script>
</body>
</html>

效果

使用clip()裁剪区域

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		*{margin:0; padding:0;}
		html, body{width:100%; height:100%; overflow:hidden; background-color:#AFAFAF;}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<script>
		var canvas = document.getElementById('canvas'),
			context = canvas.getContext('2d');
		canvas.width = document.body.clientWidth;
		canvas.height = document.body.clientHeight;
		context.lineWidth = 3;
		context.strokeStyle = 'red';
		context.rect(0, 0, 200, 200);
		context.clip();
		context.beginPath();
		context.arc(200, 200, 100, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);
		context.stroke();
		context.closePath();
	</script>
</body>
</html>

效果

也可以使用arc绘制圆形的剪裁区域

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		*{margin:0; padding:0;}
		html, body{width:100%; height:100%; overflow:hidden; background-color:#AFAFAF;}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<script>
		var canvas = document.getElementById('canvas'),
			context = canvas.getContext('2d');
		canvas.width = document.body.clientWidth;
		canvas.height = document.body.clientHeight;
		context.lineWidth = 3;
		context.strokeStyle = 'red';
		context.arc(100, 100, 150, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);
		context.clip();
		context.beginPath();
		context.arc(200, 200, 100, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);
		context.stroke();
		context.closePath();
	</script>
</body>
</html>

效果

使用save和restore实现只裁剪单个路径

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		*{margin:0; padding:0;}
		html, body{width:100%; height:100%; overflow:hidden; background-color:#AFAFAF;}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<script>
		var canvas = document.getElementById('canvas'),
			context = canvas.getContext('2d');
		canvas.width = document.body.clientWidth;
		canvas.height = document.body.clientHeight;
		context.lineWidth = 3;
		context.strokeStyle = 'red';
		context.save();
		context.rect(0, 0, 200, 200);
		context.clip();
		context.beginPath();
		context.arc(200, 200, 100, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);
		context.stroke();
		context.closePath();
		context.restore();
		context.beginPath();
		context.arc(250, 250, 100, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);
		context.stroke();
		context.closePath();
	</script>
</body>
</html>

效果

kongjunchao159

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
canvas裁剪clip()函数

在canvas中，可以使用clip()函数裁剪区域，设定裁剪区域后，只有在区域内的图像才能显示，其余部分会被屏蔽掉未使用裁剪绘制一个圆 *{margin:0; padding:0;} html, body{width:100%; height:100%; overflow:hidden; background-color:#AFAFAF;} va
复制链接

扫一扫