【web】前端html+js实现爱心图案

最新推荐文章于 2024-06-18 23:38:52 发布

new_Thread

最新推荐文章于 2024-06-18 23:38:52 发布

阅读量480

点赞数 3

文章标签：前端 html javascript

本文链接：https://blog.csdn.net/weixin_54459948/article/details/137712057

版权

效果

在这里插入图片描述

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
	</head>
	<body>
		<canvas id="can" width="800" height="600" style="margin: 100px"></canvas>
	</body>
	<script>
		var context = document.getElementById("can").getContext("2d");
		context.fillStyle = "pink";
		var points=new Array();
		for (i=-1.7655;i<1.7655;i+=0.001){
			let point = new Object();
			point.x=i;
			point.y=fxy(i);
			points.push(point);
		}
		for(i=0;i<points.length;i++){
			draw(points[i].x,points[i].y,50)
		}
		
		function draw(x,y,r){
			context.beginPath();
			context.arc((x*140-4)+400,(y*100-4)+300,r,0,2*Math.PI);
			context.fill();
		}
		function fxy(x){
			y=-Math.cbrt(x)*Math.cbrt(x)+Math.sin(16*Math.PI*x)*Math.sqrt(Math.PI-x*x)*(2.71828/3);
			return y;
		}
	</script>
</html>