js clip-path不规则弧线

HBinGG

已于 2022-06-14 17:14:47 修改

阅读量663

点赞数

文章标签： javascript css3 css

于 2022-06-14 16:10:26 首次发布

本文链接：https://blog.csdn.net/HBinGG/article/details/125280322

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>clip</title>
</head>
	<style>
		#box{
			width:800px;
			height:200px;
			background:green;
		}
	</style>
<body>
	<div id="box"></div>
	<script>
		const box = document.getElementById('box');
		let r = 50,
			a = 0,
			b = 150,
			w = 800,
			is = false,
			arr = [],
			str = '';
		arr = clip();
		str = arr.join(',');
		box.setAttribute('style',`clip-path:polygon(0 0,${str},1000px 0)`);
		function clip(){
			let path = [];
			for(let i = 0;i < (w / r);i ++){
				is = !is;
				a = i * 2 * r + r;
				for(let j = 0;j <= (2 * r);j ++){
					let x = i * 2 * r + j;
					path.push(`${x}px ${calc(x,r,a,b,is)}px`);
				}
			}
			return path;
		}
		function calc(x,r,a,b,bool){
			const Y = Math.pow(r,2) - Math.pow(x - a,2);
			if(bool){
				return Math.floor((Math.sqrt(Y) + b) * 100) / 100;
			}else{
				return Math.floor((-Math.sqrt(Y) + b) * 100) / 100;
			}
		}
	</script>
</body>
</html>