如何在网页中绘制实心三角形

一、使用SVG

SVG即可缩放矢量图形（Scalable Vector Graphics），是一种基于XML的图像格式，可以在网页中直接使用。以下是使用SVG绘制实心三角形的代码示例：

<svg width="100" height="100">
  <polygon points="50,0 0,100 100,100" style="fill:#000;"/>
</svg>

在SVG中，使用polygon标签来连接三个点，points属性用来定义三个点的坐标。style属性用来设置填充颜色，这里填充颜色为黑色（#000）。

二、使用Canvas

Canvas是一种HTML5提供的画布，可以动态绘制图形。以下是使用Canvas绘制实心三角形的代码示例：

<canvas id="myCanvas" width="100" height="100"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

context.beginPath();
context.moveTo(50, 0);
context.lineTo(0, 100);
context.lineTo(100, 100);
context.closePath();

context.fillStyle = "#000";
context.fill();
</script>

在Canvas中，使用moveTo方法设置起始坐标，使用lineTo方法连接两个点，最后使用closePath方法连接第三个点并闭合路径，实现三角形绘制。fillStyle属性用来设置填充颜色，fill方法用来填充三角形。

三、使用CSS

使用CSS中的border属性也可以绘制三角形，以下是使用CSS绘制实心三角形的代码示例：

<div style="width: 0; height: 0; border: 50px solid transparent; border-bottom-color: #000;"></div>

使用div标签设置宽高为0，并使用border属性设置四个方向的边框为50px，其中底部边框颜色为黑色（#000），实现三角形绘制。