代码
<!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(); 取消三角形的黑色填充效果。
