如何使用画布在单页中绘制三个三角形？

使用画布在单页中绘制三个三角形可以通过以下步骤实现：

创建一个HTML文件，并在文件中添加一个画布元素：

<canvas id="myCanvas" width="400" height="400"></canvas>

在JavaScript中获取画布元素，并获取其上下文：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

绘制第一个三角形：

ctx.beginPath();
ctx.moveTo(50, 50); // 设置起点
ctx.lineTo(150, 50); // 绘制第一条边
ctx.lineTo(100, 150); // 绘制第二条边
ctx.closePath(); // 封闭路径
ctx.fillStyle = "red"; // 设置填充颜色
ctx.fill(); // 填充三角形

绘制第二个三角形：

ctx.beginPath();
ctx.moveTo(200, 50);
ctx.lineTo(300, 50);
ctx.lineTo(250, 150);
ctx.closePath();
ctx.fillStyle = "green";
ctx.fill();

绘制第三个三角形：

ctx.beginPath();
ctx.moveTo(100, 200);
ctx.lineTo(200, 200);
ctx.lineTo(150, 300);
ctx.closePath();
ctx.fillStyle = "blue";
ctx.fill();

完整的HTML文件代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>绘制三角形</title>
</head>
<body>
    <canvas id="myCanvas" width="400" height="400"></canvas>

    <script>
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");

        ctx.beginPath();
        ctx.moveTo(50, 50);
        ctx.lineTo(150, 50);
        ctx.lineTo(100, 150);
        ctx.closePath();
        ctx.fillStyle = "red";
        ctx.fill();

        ctx.beginPath();
        ctx.moveTo(200, 50);
        ctx.lineTo(300, 50);
        ctx.lineTo(250, 150);
        ctx.closePath();
        ctx.fillStyle = "green";
        ctx.fill();

        ctx.beginPath();
        ctx.moveTo(100, 200);
        ctx.lineTo(200, 200);
        ctx.lineTo(150, 300);
        ctx.closePath();
        ctx.fillStyle = "blue";
        ctx.fill();
    </script>
</body>
</html>

这样就可以在单页中绘制三个三角形了。