HTML CSS JS 画的效果图


html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<style type="text/css">
			#d1{
				
				background: #CCCCFF;
				border: 2px red solid;
				position: absolute;
				left:50%;
				right: 50%;
				transform: translate(-50%);
							
				
			}
		style> 
		
	head>
	<body>
		<canvas id="d1">
			
		canvas>
		
			<script type="text/javascript">
			var canvas=document.querySelector("#d1");
			canvas.width="600";
			canvas.height="600";
			var cxt=canvas.getContext("2d");
			cxt.beginPath();
			cxt.strokeStyle="#008B8B";
		 
			
			var w=600;
			var h=600;
			let points=new Array(24);
			for(let i=0;ilength;i++)
			points[i]= new Array(2);
			
			var num =24;
			for(var i=0;i
				var x=300*Math.cos(2*3.14*i/num);
				var y=300*Math.sin(2*3.14*i/num);
				points[i][0] = x+300;
				points[i][1] = y+300;
				document.writeln(x+" "+y);
			}
			
			for(var i=0;i
			for(var j=0;j
				
			cxt.moveTo(points[i][0],points[i][1]);
			cxt.lineTo(points[j][0],points[j][1]);
			}
			cxt.stroke();		
			
		script>
		
		
	body>
html>

相关阅读:
光纤快速连接器如何安装使用？
python爬虫中json数据与python数据相互转换
解读宁波IATF16949认证：开启成功之门的钥匙️
ubuntu下的GDB的基本使用及CMake设置调试
vue基于element树形控件实现上下拖拽
Pod控制器详解-Job/CronJob(CJ)
pgsql查询近一日，近一月，近一年的数据
部署并应用ByteTrack实现目标跟踪
vue2配置环境变量并且nginx运行成功
自定义拖拽操作

原文地址：https://blog.csdn.net/laocooon/article/details/134289071