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