<canvas id="canvas" width="200px" height="200px"></canvas>#canvas {
border: 1px solid #ccc;
}const canvas = document.getElementById("canvas");
const cxt = canvas.getContext("2d");
// 实心的三角形
cxt.beginPath(); // 开始一条新的路径
cxt.moveTo(20, 20); // 路径起始点
cxt.lineTo(70, 20); // 直线1结束的点
cxt.lineTo(20, 80); // 直线2结束的点
cxt.fill(); // 填充路径的内容区域，该函数会自动闭合
// 空心的三角形
cxt.beginPath(); // 开始一条新的路径
cxt.moveTo(50, 100); // 开始一条新的路径
cxt.lineTo(100, 100); // 直线1结束的点
cxt.lineTo(100, 150); // 直线2结束的点
cxt.closePath(); // 闭合路径
cxt.stroke(); // 通过线条来绘制图形的轮廓
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.