javascript如何实现把界面上的点，动态的依次连接成一个封闭的图形？
2个回答
展开全部
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=1.0,initial-scale=1.0,width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<svg width="200" height="200" viewBox="0 0 200 200">
<path d="M20 20, L40 0, 60 20, 80 0, 60 40 Z" stroke="#0ff" stroke-width="1px" fill="#f0f"></path>
</svg>
</body>
</html>
这个是SVG实现，支持所有移动端，PC端除IE9以下不支持其他大部分也支持。
svg在html中就是用来绘制矢量图的，理论上任何图形都可以用svg画出来，同时他也和普通html对象一样，有自己的各种事件以及样式。
代码解析：svg标签，插入一个矢量图，宽度200px，高度200px。可视区域是从坐标0 0开始的200 * 200的正方形（说的很拗口。。）
path标签，定义一个路径，d属性定义了路径是啥样的，M20 20表示把起点移到X：20，Y：20的位置上， L40 0表示把这条线连接到X：40，Y：0的位置上，然后接着连接到X：60，Y：20位置再移动到X：80，Y：0在移动到X：60，Y：40，接着 Z表示把这个路径闭合，即从最后一个点X：60，Y：40再连接到起点X：20，Y：20的位置上。
stroke属性表示边框颜色，stroke-width表示边框宽度，fill表示填充颜色。
svg还有很多标签以及属性，不一一给你展示了。。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=1.0,initial-scale=1.0,width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<canvas width="200" height="200"></canvas>
<script type="text/javascript">
var canvas = document.getElementsByTagName("canvas")[0];
var context = canvas.getContext("2d");
context.fillStyle = "#f0f";
context.lineWidth = 1;
context.strokeStyle = "#0ff";
context.moveTo(20, 20);
context.lineTo(40, 0);
context.lineTo(60, 20);
context.lineTo(80, 0);
context.lineTo(60, 40);
context.fill();
</script>
</body>
</html>
这个canvas效果一样的，但是他就是一个画板，里面画出来的东西是死的，没有交互的。。
代码自己参考svg再加上自己的理解搞吧
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
