lc001-JS_canvas递归绘制三角形

最新推荐文章于 2024-05-11 11:01:21 发布

黙尘弃用

最新推荐文章于 2024-05-11 11:01:21 发布

阅读量398

点赞数 1

分类专栏： web前端_练习

本文链接：https://blog.csdn.net/skb002/article/details/104582879

版权

web前端_练习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

JS入门练习_001

效果如图：
效果图
代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>三角形</title>
	</head>
	<style type="text/css">
		canvas{
			/* 画板居中 */
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			/* 背景改为绿色 */
			background-color: darkgreen;
		}
		canvas:hover{
			cursor: pointer;
		}		
	</style>
	<script type="text/javascript">
		window.οnlοad=function(){
			var cvs=document.getElementsByTagName("canvas")[0];
			if(cvs.getContext){
				var g=cvs.getContext("2d");
				
				function draw(x1,y1,x2,y2,x3,y3){  //绘制三角
					var tmp=g.strokeStyle;
					//生成随机的绘制颜色
					g.strokeStyle="#"+Math.floor((Math.random()*256)).toString(16)
									 +Math.floor((Math.random()*256)).toString(16)
									 +Math.floor((Math.random()*256)).toString(16);
					//绘制三角形
					g.beginPath();
					g.moveTo(x1,y1);
					g.lineTo(x2,y2);
					g.lineTo(x3,y3);
					g.closePath();
					g.stroke();
					//样式 还原
					g.strokeStyle=tmp;
				};
				
				function func1(x1,y1,x2,y2,x3,y3,d){
					//计算个边中点
					var x12=(x1+x2)/2;
					var x13=(x1+x3)/2;
					var x32=(x3+x2)/2;
					var y12=(y1+y2)/2;
					var y13=(y1+y3)/2;
					var y32=(y3+y2)/2;
					
					draw(x1,y1,x12,y12,x13,y13);		//绘制 左下三角形
					draw(x12,y12,x2,y2,x32,y32);		//绘制 顶部三角形
					draw(x13,y13,x32,y32,x3,y3);		//绘制 右下三角形
					
					if(--d>0){							//递归终止条件
						func1(x1,y1,x12,y12,x13,y13,d);
						func1(x12,y12,x2,y2,x32,y32,d);
						func1(x13,y13,x32,y32,x3,y3,d);
						func1(x13,y13,x12,y12,x32,y32,d);
					}
				}
				window.setInterval(func1,500,0,100*(3**(1/2)),100,0,200,(3**(1/2))*100,3);  //每隔500ms重绘一次，使颜色不停地变换。
			}
		}
	</script>
	<body>
		<canvas width="1200px" height="800px"></canvas>
	</body>
</html>