代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas 绘制三角形</title>
</head>
<body>
<canvas id="cavsElem">您的浏览器不支持Canvas，请升级浏览器</canvas>
<script>
var canvas = document.getElementById('cavsElem'); //获取画布
var context = canvas.getContext('2d'); //获取上下文对象
//设置标签的宽、高和边框
canvas.width = 400;
canvas.height = 400;
canvas.style.border = '1px solid #000';
//绘制三角形
context.beginPath(); //开始路径
context.moveTo(100,100); //定义初始位置
context.lineTo(300,300); //定义连接端点
context.lineTo(100,300); //定义连接端点
context.closePath(); //结束路径
context.stroke(); //描边路径
context.fill(); //三角形的填充效果
</script>
</body>
</html>
上述代码中：
使用了JavaScript为画布设置了宽、高和边框，然后通过坐标确定了三角形的三个点，规划了绘制路径，最后进行描边操作，成功绘制了一个填充效果为黑色的三角形。
运行效果
删除第24行代码context.fill(); 取消三角形的黑色填充效果。
