javascript 用什么标签画线
如果你不希望依赖于图形库，或者只是想在JavaScript中画一些简单的图形，那么使用合适的标签画线可能是一个非常简单而有效的解决方案。
让我们首先看看HTML中有哪些标签可以直接用来画线。HTML5引入了两个新标签<canvas>和<svg>，这两个标签都可以用来绘制图形。具体来讲，<canvas>标签提供了一个用于绘制图形的JavaScript API，而<svg>标签则使用XML和CSS绘制图形。
假设我们要在一个网页上画一条水平线段：
<hr>
是最简单的方法之一。然而，如果您想要在JavaScript中动态地绘制一个水平线段，它可能并不是最佳选择。
让我们现在看看如何在<canvas>标签中绘制水平线段。首先在HTML中创建一个canvas元素：
<canvas id="myCanvas"></canvas>
然后，使用JavaScript来获取canvas元素并获取其上下文，并使用canvas上下文中的strokeRect方法绘制一个水平线段：
var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");ctx.beginPath();ctx.moveTo(0,50);ctx.lineTo(200,50);ctx.strokeStyle = "green";ctx.stroke();上述JavaScript代码的意思是，在canvas上下文中创建一条路径，该路径由起点(0,50)和终点(200,50)组成，颜色为绿色，然后用stroke方法将路径渲染到画布上。
使用<svg>标签来画线也是非常容易的。
<svg ><line x1="0" y1="50" x2="200" y2="50" /></svg>
上面的代码创建一个<svg>元素和一条线。线由两个点(0,50)和(200,50)组成，颜色为绿色，线宽为2。
同样，使用JavaScript在<svg>中绘制水平线段也是非常简单的。
var svgNS = "w3.org/2000/svg";var svgElem = document.createElementNS(svgNS,"svg");svgElem.setAttribute("width", "200");svgElem.setAttribute("height", "100");var line = document.createElementNS(svgNS,"line");line.setAttribute("x1", "0");line.setAttribute("y1", "50");line.setAttribute("x2", "200");line.setAttribute("y2", "50");line.setAttribute("stroke", "green");line.setAttribute("stroke-width", "2");svgElem.appendChild(line);document.body.appendChild(svgElem);上面的JavaScript代码创建了一个SVG元素和一条线。线由两个点(0,50)和(200,50)组成，颜色为绿色，线宽为2。然后将线添加到SVG元素中并将SVG元素添加到文档中。
总的来说，虽然用HTML标签绘制图形可能不如使用专门的图形库那样灵活和功能强大，但它是一个快速而方便的用于画一些简单线条和形状的方法。
免责声明：本文内容来自用户上传并发布，站点仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。请核实广告和内容真实性，谨慎使用。