canvas创建三角形

var bg = document.getElementById('canvas1');
var ctx = bg.getContext('2d');
//填充三角形（等边）
ctx.beginPath();
var height = 200*Math.sin(Math.PI/3);//计算等边三角形的高
ctx.moveTo(100,0); //从A（100,0）开始
ctx.lineTo(0,height);//从A(100,0)开始，画到B (0,173)结束
ctx.lineTo(200,height); //B(0,173)-C(200,173)
//ctx.fillStyle='#00ff00';//以纯色绿色填充
var grd = ctx.createLinearGradient(0,0,200,0);//使用渐变颜色填充,从(0,0)到(200,0) （左到右）
grd.addColorStop(0,"#4CE8B2"); //起始颜色
grd.addColorStop(1,"#EFD458"); //终点颜色
ctx.fillStyle=grd; //以上面定义的渐变填充
ctx.fill(); //闭合形状并且以填充方式绘制出来

<canvas id="canvas1"></canvas>
<script type="text/javascript">
function hT(id,x1, y1, x2, y2, x3, y3, color, type){
  var canvas = document.getElementById(id);
  var ctx = canvas.getContext("2d");
   ctx.beginPath();
   ctx.moveTo(x1, y1);
   ctx.lineTo(x2, y2);
   ctx.lineTo(x3, y3);
   ctx[type + 'Style'] = color;
   ctx.closePath();
   ctx[type]();
}
//hT("canvas1",77,3,4,132,151,133, "red", "stroke") // 空心
hT("canvas1",77,3,4,132,151,133, "red", "fill") //实心
</script>