一、使用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>
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();
在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），实现三角形绘制。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/254407.html
微信扫一扫 
支付宝扫一扫 