canvas 实现渐变色填充的三角形

 

　　canvas实现

 

　　1. 绘制三角形

 

　　// html

 

　　<canvas id="triangle" width="30" height="30">

 

　　Your browser does not support the canvas element.

 

　　</canvas>

 

　　// javascript

 

　　var triangle: any = document.getElementById（"triangle"）;

 

　　var ctx = triangle.getContext（"2d"）; // canvas 绘制区域

 

　　ctx.beginPath（）; // 开始绘制

 

　　ctx.moveTo（0, 0）; // 起点A（0,0）

 

　　ctx.lineTo（30, 0）; // 从起点A（0,0）绘制到B（30,0）

 

　　ctx.lineTo（15, 16）; // 从B（30,0）绘制到C（15,16）

 

　　2. 设置渐变色并填充

 

　　// javascript

 

　　const grd1 = ctx.createLinearGradient（0, 0, 0, 16）; // 渐变方向-Y轴

 

　　grd1.addColorStop（0, "#FFFFFF"）; //起始颜色

 

　　grd1.addColorStop（1, "#CE070A80"）; //终点颜色

 

　　ctx.fillStyle = grd1; //以上面定义的渐变填充

 

　　ctx.fill（）; //闭合形状并且以填充方式绘制出来