一、使用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/zh-hant/n/254407.html
微信掃一掃 
支付寶掃一掃 