首先使用canvas写一个画布元素，然后获取到该元素，然后通过getContext('2d') 建立一个 2d 画布的对象，然后通过该对象的 beginPath() , moveTo(), lineTo(), fill() 等方法开始绘制填充三角形。填充的方式用ctx.fillStyle = '#00ff00' 即可。
好了，话不多说上代码，，，，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas画三角形</title>
</head>
<body>
<canvas id="sanjiao"></canvas>
</body>
<script>
var ctx = document.getElementById('sanjiao').getContext("2d");
ctx.beginPath();
ctx.moveTo(100, 0);
ctx.lineTo(0, 100);
ctx.lineTo(0, 0);
ctx.fillStyle = '#00ff00'
// ctx.closePath(); // 可选步骤，关闭绘制的路径
// fill 做填充
ctx.fill();
// stroke 加边框，需和 closePath 配合使用
// ctx.stroke();
</script>
</html>
