画图形
画三角形
用css的border
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.triangle {
width: 0;
height: 0;
/* border-left: 100px solid rebeccapurple;
border-right: 100px solid indianred;
border-top: 100px solid cadetblue;
border-bottom: 100px solid red; */
/* 要哪个方向的三角形就把哪边给显示出来 */
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-top: 100px solid transparent;
border-bottom: 100px solid red;
}
</style>
</head>
<body>
<!-- 其实原本是一个正方形，但是把边框的其余部分给隐藏了 -->
<div class="triangle"></div>
</body>
</html>用canvas画三角形
html
<canvas id="triangle" width="200" height="200"></canvas>js
const canvas = document.getElementById('triangle');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(100, 0);
ctx.lineTo(200, 200);
ctx.lineTo(0, 200);
ctx.closePath();
ctx.fillStyle = 'red';
ctx.fill();